vue3中使用工具实现的打印功能总结

好记性不如烂笔头，如果不记录下来转眼就忘

本文只介绍这两种打印工具：

print-js
vue3-print-nb

本次只因为需求更改为每页添加页眉而从 print-js 改为 vue3-print-nb
适用场景

print.js：

适合只有第一页有页眉，其他页没有的。想要用占位符加那也是加不了的。暂未发现其他不适用的场景。

https://github.com/crabbly/Print.js/issues/38 （作者回复每页页眉么得时间做，用轮子的人更没有时间O(∩_∩)O哈哈~）

使用中需要注意：
1.选择 css 或者 style 样式时只能选其一生效。建议使用style 样式，不然使用class后有的地方比如使用表格时候设置每列宽度什么的很痛苦。当然，根据需求选择适合的来做。
2.如果使用class的样式在浏览器打印预览中不生效可以试试cssStyle那样返回

const cssStyle = ()=>{
return `
.class1{}
.calss2{}
`
}let focuser = setInterval(() => window.dispatchEvent(new Event("focus")), 500);
const headerHtml = `<div>我是页眉</div>`
printJS({printable: "printJS-page",type: "html",targetStyles: ["*"],scanStyles: true,style: '@page { size: auto; margin: 0mm; }' // 设置取消浏览器默认的页眉页脚0maxWidth: 740,font_size: "",class:cssStyle(),header:headerHtml,headerStyle:'print-header-box',onPrintDialogClose() {clearInterval(focuser);},onError(e) {console.error("打印回调error-info:",e);}});

至于其他的没有什么需要特别注意的。

vue3-print-nb:

适合每页需要页眉的。页眉与页脚设置的方法不相同，所以不能一概而论。

使用中需要注意浏览器默认的页眉页脚，如果不需要的话可以利用以下css样式去掉。

@media print {@page {size: auto;margin: 8mm;}
}

如果需要则在popTitle属性添加就好。

const printMe = ()=>{
return {id: "print-page",popTitle: "默认浏览器中的页眉 docunent",beforeOpenCallback(vue) {vue.printLoading = true;console.log("打开之前");},openCallback(vue) {vue.printLoading = false;console.log("执行了打印");},closeCallback(vue) {console.log("关闭了打印工具");}};
}

<a-button v-print="printMe()">打印</a-button>

使用此工具添加页眉时参考网上的答案但是链接没有保存，利用table 作为内容的布局方式，作为页眉占位符使用，作为正文内容。布局代码如下。

<div id="print-page"><header class="page-header print-show"><div class="print-header-box"><text>我是页眉</text><img src="../../assets/logo" style="width: 67.5mm;height: 14mm"></div></header><table><thead><tr><td><div class="page-header-space"></div></td></tr></thead><tbody><tr><td>正文</td></tr></tbody></table></div>

@media screen {/* 在自定义预览界面时不显示页眉 */#print-page .print-show {display: none;}#print-page {font-size: 14px;color: #000000;height: calc(100vh - 125px);width: 100%;overflow: hidden auto;display: flex;justify-content: center;padding: 30px 20px;box-sizing: border-box;}/*预览时将占位符高度修改0不可见*/#print-page .page-header-space,#print-page .page-header-space {height: 0;}
}@media print {@page {size: auto;margin: 8mm;}#print-page {width: 100%;display: block;height: auto;font-size: 14px;font-weight: 500;}#print-page .print-header-box {width: 100%;display: flex;justify-content: space-between;align-items: flex-end;border-bottom: 2px solid rgb(140 140 140);padding-bottom: 4px;font-size: 24px;font-weight: bold;}#print-page .page-header {/* 页眉高度 */height: 80px;top: 0mm;position: fixed;width: 100%;z-index: 2000;}#print-page .page-header-space {/* 控制内容区距离顶部的距离，防止与页眉重叠 */height: 80px;}
}