HTML页面转化为带有水印的PDF文件
我之前写过一篇如何把HTML页面转化为PDF文件，这里就不详讲了，主要讲如何增加水印
一、如何增加水印，在什么时候增加水印？
在用 html2Canvas 框架生成canvas后，操作canvas增加水印。代码如下：
1 downloadPDF(){
2 var title = 'RFM'
3 let self = this;
4 let targetDom = document.querySelector('#pdfDom');
5 this.$nextTick(()=>{ // 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
6 html2Canvas(targetDom, {
7 allowTaint: true,
8 height: targetDom.scrollHeight
9 }).then(function (canvas) { // 通过promise返回canvas元素
10 let context = canvas.getContext('2d');
11 self.printWater(context);
12 let PDF = new JsPDF('p', 'pt', 'a4')
13 // 中间操作代码省略
14 PDF.save(title + '.pdf') // 保存pdf文档，本地下载pdf文件
15 })
16 })
17 this.timeout = setTimeout(() => {
18 self.overflow = 'auto';
19 }, 1000);
20
21 },
22 // 打印水印
23 printWater(context) {
24 context.font='200px Palatino'
25 context.fillStyle = 'rgba(0,0,0,0.03)';
26 let height = 0;
27 context.save();
28 let pageHeight = context.canvas.height / 592.28 * 841.89
29 while(height < context.canvas.height) {
30 context.save();
31 context.translate(0,height) // 移动原点位置
32 context.rotate(Math.PI/4); // 旋转
33 context.fillText('我是个美女', 300 ,350);
34 context.restore();
35 height += 841.89;
36 }
37 context.restore();
38 },
