printJS打印预览内容重叠问题处理

原创于 2024-04-22 13:44:27 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css

本文介绍了在使用printJS库时，通过设置`scanStyles`为`false`并自定义打印样式的方法，以避免打印预览中的样式冲突问题，着重分享了`printHt()`和`getPrintStyle()`函数的实现.

printJS 库相关的使用方法不予赘述，只是快速记录了解决方法
在看到的一些文章也提出了相应的解决方案尝试了个别之后发现不好使对我这个项目
先说我的解决方案
把scanStyes设置为false 从而进行样式自定义
之后把所设置打印区域相关的样式写到方法里，这么做之后打印预览页面的确不会因为盒子浮动导致重叠

printHt() {
            // 此处的style即为打印时的样式
            const _this = this
            this.$nextTick(() => {
                printJS({
                    printable: "printer_div",
                    type: "html",
                    header: "",
                    scanStyles: false,
                    maxWidth: 9999,
                    style: _this.getPrintStyle(),
                    targetStyles: ["*"],
                    onPrintDialogClose: () => {
                    },
                });
            });
        },
 getPrintStyle(){
	return `
	.printer_div {
                font-size:12px;
                font-weight:400;
                display: flex;
                flex-direction: column;
           }`
     // 其他相关元素的样式      
}