直接用【print-js】实现打印，有些样式不能正常识别。所以用html2canvas将dom转图片再实现打印兼容性才是最好的。
注意：利用html2canvas打印图片，一行文本有可能中间被分割跨两个页面，这时需要用css设置div内外边距来解决。如果内容不确定，这个问题很难解决。纯print-js打印html，又有很多css样式错乱或不支持，只能调整css样式解决兼容（工作量大）。
1.安装两个插件：
npm install print-js --save
npm install --save html2canvas
【html2canvas】用法：（注）给dom设置width宽度（或添加类名控制打印时的样式），再执行画布函数。浏览器保存PDF文档可视内容也是710像素左右。
//html2canvas配置文档：https://allenchinese.github.io/html2canvas-docs-zh-cn/docs/html2canvas-configuration.html
document.body.style.width = '710px';
html2canvas(document.body, {
backgroundColor: '#ffffff',
}).then((canvas) => {
// toDataURL 图片格式转成 base64
let dataURL = canvas.toDataURL('image/png');
});
【print-js】用法：
//官网https://printjs.crabbly.com/
printJs({
printable: base64_dataURL,// pdf or image url, html element id or json data object
//printable:['https://www.baidu.com/img/flexible/logo/pc/result.png','https://www.baidu.com/img/flexible/logo/pc/result.png'],//支持多张图片
type: "image",
maxWidth: 1000,
base64: true,
style: `@media print { @page {size: auto;} body{margin:0px 5px}}` // 解决出现多页打印时第一页空白问题
});
【element-ui + vue2】项目的实现打印的代码：
<template>
<div class="container">
<div @click="handlePrint">打印按钮</div>
<div></div>
<div id="BaseTableBox">要打印的内容</div>
<div></div>
</div>
</template>
<script>
import printJs from "print-js"; //导入
import html2canvas from "html2canvas"; //导入
export default {
data() {
return {};
},
created() {},
methods: {
//打印
handlePrint() {
// const loading = this.$loading({
// lock: true,
// text: "正在启动打印",
// spinner: "el-icon-loading",
// background: "rgba(255, 255, 255, 1)",
// });
// let dom = this.$el.querySelector("#BaseTableBox");
let dom = document.querySelector("#BaseTableBox");
dom.classList.add("BaseTablePrint"); //添加打印的布局样式
let timer = setTimeout(() => {
//添加class样式不能马上生效，所以用定时器延迟，保证样式生效后再用画布绘制。
html2canvas(dom, {
backgroundColor: "#ffffff",
}).then((canvas) => {
// loading.close();//关闭element-ui的加载遮罩
// toDataURL 图片格式转成 base64
let dataURL = canvas.toDataURL("image/png");
//打印
printJs({
printable: dataURL,
type: "image",
maxWidth: 1000,
base64: true,
style: `@media print { @page {size: auto;} body{margin:0px 5px}}` // 解决出现多页打印时第一页空白问题
});
dom.classList.remove("BaseTablePrint"); //删除打印的布局样式
clearTimeout(timer);
});
}, 300);
},
},
};
</script>
<style lang="scss">
.BaseTablePrint {
//打印的样式
width:710px;
}
</style>
注意：【@media print】媒体查询的样式，在edge浏览器中，只有用浏览器快捷式【Ctrl + P】启动打印print css样式才会生效。
