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 },