vue2.0
后端返回文件链接,想要直接调用打印机打印出来。有什么方法实现。
可以先预览后打印,但是
用kkfileview预览后,使用 ctrl + P 后打印不全。纸上出现导航条。
如果只是通过后端返回的文件链接调用打印机打印,一般有几个思路:
printFile(url) {
const newWindow = window.open(url, '_blank');
newWindow.onload = function () {
newWindow.print();
};
}
这个方法比较适用于常见的 PDF、图片等文件,浏览器会在新窗口打开文件,并在加载完毕后直接调用打印机进行打印。
2. 直接将文件嵌入 iframe
中并打印
为了避免文件打开新窗口,可以将文件嵌入到页面中的 iframe
,然后直接调用 iframe
的打印方法。这种适合在不希望文件预览时跳转到新窗口的场景下。
<template>
<div>
<iframe id="printFrame" style="display: none;"></iframe>
</div>
</template>
<script>
export default {
methods: {
printFile(url) {
const iframe = document.getElementById('printFrame');
iframe.src = url;
iframe.onload = function () {
iframe.contentWindow.focus();
iframe.contentWindow.print();
};
}
}
}
</script>
这种方法不会在页面上显示预览,而是直接通过 iframe 调用打印机。
3. 使用第三方库进行打印(如 Print.js)
Print.js 是一个方便的库,支持多种格式的文件直接调用浏览器打印。
使用步骤:
通过 npm 安装:
npm install print-js
在 Vue 组件中调用 printJS
方法来打印文件:
<template>
<div>
<button @click="printFile">打印文件</button>
</div>
</template>
<script>
import printJS from 'print-js';
export default {
methods: {
printFile() {
printJS({
printable: 'https://example.com/file.pdf', // 后端返回的文件链接
type: 'pdf', // 如果是 PDF 文件
showModal: true // 显示加载提示
});
}
}
}
</script>
这个库支持多种类型的文件(PDF、HTML、图片等),并提供了一些选项用于控制打印过程。
下面说说解决 kkFileView 打印问题
使用 kkFileView
预览后,打印不全,并且纸上出现导航条,这一般是因为浏览器在打印时会包括页面的所有内容(如导航栏、工具栏等)。可以优化一下打印效果:
ctrl + P
打印时,使用 CSS @media print
来隐藏页面上的导航条或其他不想打印的内容。@media print {
/* 隐藏导航栏 */
.navbar {
display: none;
}
/* 根据需要调整页面布局 */
body {
margin: 0;
}
}
使用 Print.js 打印 PDF:如果 kkFileView
的预览打印效果不好,可以使用 Print.js
直接打印 PDF,这样可以避免页面上的不必要元素。
调整 kkFileView 的 CSS:有时候 kkFileView 预览的页面 CSS 可能不适合打印,需要对 kkFileView 的打印样式进行调整,确保打印时能将整个文档打印完全。
多谢。打印excel的插件有吗?
@庚: 没有哦