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

R
  • 12

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

回复
阅读 694
3 个回答

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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏