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

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

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


回答:

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 然后在控制台执行这段代码
vue怎么实现这种点击下载  弹出  可打印可下载


回答:

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


回答:

参考如何预览以及下载pdf文件
vue怎么实现这种点击下载  弹出  可打印可下载

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

以上是 vue怎么实现这种点击下载 弹出 可打印可下载 的全部内容, 来源链接: utcz.com/p/935542.html

回到顶部