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

Question

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

Answer 1

用 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 然后在控制台执行这段代码

Answer 2

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

Answer 3

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

<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>