1、首先来看下效果图
2、使用技术：html2Canvas、JsPDF插件，mode_modules下载两个插件
npm i html2Canvas JsPDF其中，html2Canvas 负责把html转为图片，JsPDF负责把图片转为pdf文件
3、点击按钮触发打印事件
//点击按钮触发打印事件
button @click='htmlToPdf(节点ID',文件名')'>print<button>
//传入打印节点，文件名,然后调用打印事件
htmlToPdf(domName, title) {
this.downloadPDF(domName, title)
},
//主要代码
downloadPDF(domName, title) {
window.pageYoffset = 0;
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
// 水印
const can = this.waterMark()
const el = document.getElementById(domName);
return new Promise((resolve, reject) => {
const ele = document.getElementById(domName);
let eleW = ele.offsetWidth+20; // 获得该容器的宽
// let eleH = ele.offsetHeight // 获得该容器的高
let eleH = ele.offsetHeight; // 获得该容器的高
let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
var canvas = document.createElement("canvas");
let scaleBy = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1;
canvas.width = eleW * 2; // 将画布宽&&高放大两倍
canvas.height = eleH * 2;
var context = canvas.getContext("2d");
context.scale(2, 2);
// context.translate(-offsetLeft - abs, -offsetTop);
var opts = {
scale: 2,//解决pdf不清晰问题
// canvas: canvas,
width: eleW,
height: eleH,
// logging :true,
useCORS: true,
background: "#FFF",
allowTaint: false,
// dpi: 300,
dpi: window.devicePixelRatio * 2,
// scale: window.devicePixelRatio * 2,
};
html2Canvas(el, opts).then((canvas) => {
var pdf = new JsPDF("p", "mm", "a4"); //A4纸，纵向
var ctx = canvas.getContext("2d"),
a4w = 200,
a4h = 287, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
renderedHeight = 0;
while (renderedHeight < canvas.height) {//截取的高度小于html高度时
var page = document.createElement("canvas");
page.width = canvas.width;
page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
//用getImageData剪裁指定区域，并画到前面创建的canvas对象中
page
.getContext("2d")
.putImageData(
ctx.getImageData(
0,
renderedHeight,
canvas.width,
Math.min(imgHeight, canvas.height - renderedHeight)
),
0,
0
);
pdf.addImage(
page.toDataURL("image/jpeg", 1.0),
"JPEG",
5,
5,
a4w,
Math.min(a4h, (a4w * page.height) / page.width)
); //添加图像到页面，保留10mm边距
// 给每一页添加水印
pdf.addImage(can, 'PNG', 0, -130, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 0, -100, a4w,Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 0, -70, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 0, -40, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 0, -10, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 0, 20, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 0, 50, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 0, 80, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 0, 110, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 0, 140, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -50, -130, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -50, -100, a4w,Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -50, -70, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -50, -40, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -50, -10, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -50, 20, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -50, 50, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -50, 80, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -50, 110, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -50, 140, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 30, -130, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 30, -100, a4w,Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 30, -70, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 30, -40, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 30, -10, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 30, 20, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 30, 50, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 30, 80, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 30, 110, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 30, 140, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -80, -130, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -80, -100, a4w,Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -80, -70, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -80, -40, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -80, -10, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -80, 20, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -80, 50, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -80, 80, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -80, 110, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', -80, 140, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 60, -130, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 60, 100, a4w,Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 60, -70, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 60, -40, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 60, -10, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 60, 20, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 60, 50, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 60, 80, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 60, 110, a4w, Math.min(a4h, (a4w * page.height) / page.width))
pdf.addImage(can, 'PNG', 16, 140, a4w, Math.min(a4h, (a4w * page.height) / page.width))
renderedHeight += imgHeight;
if (renderedHeight < canvas.height) {
pdf.addPage(); //如果后面还有内容，添加一个空页
}
// delete page;
}
//保存文件
try {
pdf.save(title + ".pdf");
window.open(pdf.output('bloburl'))
window.close();
resolve();
} catch (error) {
reject();
}
});
});
}
//水印
waterMark() {
const can = document.createElement('canvas')
// 设置画布的长宽
can.width = 800
can.height = 1020
const cans = can.getContext('2d')
// 旋转角度 canvas旋转不是以图片旋转，而是以画布左上角为原点旋转
cans.rotate(-Math.PI/4)
cans.translate(0, 0)
const fillTxt = '我是水印'
const txtLen = fillTxt.length
// 水印如果都短设置为150px字体，长水印则80px字体
// const fontSize = txtLen > 12 ? '80px Simsun' : '150px Simsun'
const fontSize = '30px Simsun'
cans.font = fontSize
// 设置填充绘画的颜色、渐变或者模式
cans.fillStyle = 'rgba(64, 158, 255,0.32)'
// 设置文本内容的当前对齐方式
cans.textAlign = 'center'
// 设置在绘制文本时使用的当前文本基线
cans.textBaseline = 'Middle'
// 在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
cans.fillText(fillTxt, -txtLen * 5, 700)
return can
}