18910140161

vue 点击下载文件 vue怎么实现这种点击下载 弹出 可打印可下载

顺晟科技

2022-10-19 08:48:28

430

点击表格的点击下载 他会在网页跳转到这里 然后把文件分好页 可下载可打印 这是怎么弄的啊

window.print() 可以调出浏览器的打印窗口 打印 pdf 链接可以用 iframe这是代码:

var src = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'
printPdf(src)

function printPdf(src) {
  var iframe = document.createElement('iframe');
  document.body.appendChild(iframe);

  iframe.style.display = 'none';
  iframe.onload = function () {
    setTimeout(function () {
      iframe.focus();
      iframe.contentWindow.print();
    }, 1);
  };

  iframe.src = src;
}

直接复制到控制台运行会有跨域问题,可以把src换成不跨越的资源链接,或者新开一个标签页访问 https://www.w3.org 然后在控制台执行这段代码 image.png

这不就是一个pdf链接吗....

参考如何预览以及下载pdf文件image.png

<iframe src="" id="iframe" frameborder="0"></iframe>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  function loadpdf() {
    axios({
      method: 'get',
      url:
        'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8e76dff9-ce38-4577-9e5c-398943705060/a5b050b8-3fa1-4436-b231-7b40725de731.pdf',
      responseType: 'blob',
    }).then(function (response) {
      let blob = new Blob([response.data], { type: response.data.type })
      let url = URL.createObjectURL(blob)
      document.getElementById('iframe').src = url
    })
  }
</script>
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航