下面有两种打印方法,
缺点:①只能打印单个文件,就是说无法批量打印。 ②把url换成word的可以吗,不能,直接变成下载word了。
其他打印方案,lodop、electron等可以静默打印的,是需要用户安装软件的。不说了。
原生打印
<template>
<div>
<button @click="printAllPDFs">打印PDF</button>
<iframe
v-for="(pdf, index) in pdfFiles"
:key="index"
:src="pdf"
style="display:none;"
></iframe>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
printAllPDFs() {
const pdfUrl = ''
const baseFileUrl = process.env.VUE_APP_FILE_URL
const printUrl = baseFileUrl + pdfUrl
let printFrame = document.createElement('iframe')
printFrame.setAttribute('style', 'display:none')
printFrame.src = printUrl
console.log(printFrame)
document.body.appendChild(printFrame)
printFrame.onload = () => {
// 调用这步来实现 iframe窗口中的打印
printFrame.contentWindow.print()
}
}
}
}
</script>
vue-print-nb打印(preview设置成false就打印不了,preview设置为true会在网页内预览,然后点打印又在浏览器弹窗预览,无力吐槽...)
<template>
<button v-print="printObj">Print local range</button>
</template>
<script>
import print from 'vue-print-nb'
export default {
directives: {
print
},
data() {
return {
printObj: {
url: 'pdf',
preview: true, // 这个好像是预览
previewTitle: 'Test Title', // The title of the preview window. The default is 打印预览
previewBeforeOpenCallback(vue) {
console.log('正在加载预览窗口')
},
previewOpenCallback(vue) {
console.log('已经加载完预览窗口')
},
beforeOpenCallback(vue) {
console.log('打开之前')
},
openCallback(vue) {
console.log('执行了打印')
},
closeCallback(vue) {
console.log('关闭了打印工具')
}
}
}
}
}
</script>