如何接收后端接口返回的图片或者pdf后去预览打印

在线效果：https://codepen.io/13476075014/pen/VwJdGvz?editors=1010

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 引入axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.5/axios.min.js"></script>

  <div id="qrcode"></div>

  <!--  要打印的iframe  -->
  <iframe id="wordPreview" style="display: none;"></iframe>

  <script type="text/javascript">
    //二维码
    // var qrcode = new QRCode(document.getElementById("qrcode"), {
    //   text: "http://jindo.dev.naver.com/collie",
    //   width: 128,
    //   height: 128,
    //   colorDark: "#000000",
    //   colorLight: "#ffffff",
    //   correctLevel: QRCode.CorrectLevel.H
    // });

    //处理预览打印的效果
    axios('https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics6.baidu.com%2Ffeed%2Fc995d143ad4bd113bf33fe87473c2c014afb052e.jpeg%40f_auto%3Ftoken%3D06f223bda9ac455d6ae194dd03271730&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1725123600&t=3e135da5639d7d6e70617babba5f2240', {
        responseType: 'blob'
      }, {}).then(response =>
        response.data
      )
      .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const iframe = document.getElementById('wordPreview');
        //   iframe.src = url; // Print the iframe content 
        iframe.contentWindow.document.body.innerHTML = `<img src="${url}"/>`
        setTimeout(() => {
          iframe.contentWindow.print();
        })
      })
      .catch(e => console.error('Error:', e))
  </script>

</body>

</html>

 

posted @ 2024-08-30 09:38  missLiuliu  阅读(12)  评论(0)  编辑  收藏  举报