VUE3 TS 大前端 JS 打印 兼容 批量分页打印

实际业务中可能会用到标签机等软贴类硬件设备；

本文档不需要引入插件 放心食用；

以下CSS样式将解决你的心头之烦、不用再去针对分页高度的烦扰；

CSS解决分页高度差问题

page-break-after:always;

 实际效果展示

代码演示

<div ref="printDom" >
    打印内容
</div>
<el-button @click="printOut(printDom)" type="primary">打印</el-button>

 插入自定义打印页面样式

// printDom 为即将打印的模块
const printDom = ref(null);
// printOut 打印方法 
// 打印步骤 跳出页面 _blank的方式 打印数据集
const printOut = (dom: any) => {
    var newWindow = window.open("打印页面", "_blank");
    var docStr = dom.innerHTML
    // 插入样式
    var style = document.createElement('style');
    //portrait 纵向 landscape横向 
    style.innerHTML = "@media print { @page {size:210mm 230mm!important; margin: 0;padding: 0;margin-top:8.2mm;margin-left:10.05mm;margin-right:5.05mm;margin-bottom:0mm;} .noprint { display: none;}}";
    newWindow.document.head.appendChild(style);
    newWindow.document.write(docStr);
    newWindow.document.close();
    newWindow.print();//开启打印
    newWindow.close();//关闭打印
};

page-break-after 定义和用法

W3C地址

CSS page-break-after 属性 (w3school.com.cn)https://www.w3school.com.cn/cssref/pr_page-break-after.asp

page-break-after 属性设置元素后的 page-breaking 行为。

尽管可以用 always 强制放上分页符，但是无法保证避免分页符的插入，创作人员最多只能要求用户代理尽可能避免插入分页。

应用于：position 值为 relative 或 static 的非浮动块级元素。

扫描二维码关注公众号，回复： 14771403 查看本文章

注释：请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

总结

如果此篇文章对你有所帮助、一键三联、谢谢。