用到了 html2canvas printJS
1.html 内容
<div ref="printTest" id="printTest" class="printDetails">需要打印的内容</div>
<i-button type="primary" @click="hanldepoint">打印</i-button>
2.js
import html2canvas from "html2canvas";
import printJS from "print-js";
hanldepoint() {
const printContent = this.$refs.printTest;
// 获取dom 宽度 高度
const width = printContent.clientWidth;
const height = printContent.clientHeight;
// 创建一个canvas节点
const canvas = document.createElement("canvas");
const scale = 4; // 定义任意放大倍数，支持小数；越大，图片清晰度越高，生成图片越慢。
canvas.width = width * scale; // 定义canvas 宽度 * 缩放
canvas.height = height * scale; // 定义canvas高度 *缩放
canvas.style.width = width * scale + "px";
canvas.style.height = height * scale + "px";
canvas.getContext("2d").scale(scale, scale); // 获取context,设置scale
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动轴滚动的长度
const scrollLeft =
document.documentElement.scrollLeft || document.body.scrollLeft; // 获取水平滚动轴的长度
html2canvas(printContent, {
canvas,
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight,
scrollX: -scrollLeft, // 解决水平偏移问题，防止打印的内容不全
scrollY: -scrollTop
})
.then(canvas => {
const url = canvas.toDataURL("image/png");
//打印方法
printJS({
printable: url,
type: "image",
documentTitle: "", // 标题
style: "@page{size:auto;margin: 0cm 1cm 0cm 1cm;}" // 去除页眉页脚
});
})
.catch(err => {
console.error(err);
});
}
