我之前寫過一篇如何把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 },