pdf。js的水印不支持中文解决

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@handsontable/vue": "^11.1.0",
     "@lapo/asn1js": "^1.2.1",
+    "@pdf-lib/fontkit": "^1.1.1",
     "axios": "^0.25.0",
     "chokidar": "^3.5.3",
     "core-js": "^3.6.5",

src/vendors/pdf/PdfView.vue

@@ -29,6 +29,8 @@ import 'pdfdist-mergeofd/web/pdf_viewer.css';
 PDFJS.GlobalWorkerOptions.workerSrc = require("pdfdist-mergeofd/build/pdf.worker.entry.js");
 import { saveByteArray } from '@/utils/index'
 
+import fontkit from '@pdf-lib/fontkit'
+
 export default {
   name: "PdfView",
   props: {
@@ -87,8 +89,13 @@ export default {
     async loadFile() {
       //初始化pdf
       console.log("初始化pdf");
+      const fontUrl = require('./font/SourceHanSansCN-Regular.ttf')
+      // const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
+      const fontBytes = await fetch(fontUrl).then((res) => res.arrayBuffer());
       const pdfDoc = await PDFDocument.load(this.data)
-      const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
+      pdfDoc.registerFontkit(fontkit); // 自定义字体挂载、fontkit为自定义字体注册工具
+      const customFont = await pdfDoc.embedFont(fontBytes);
+
       const pages = pdfDoc.getPages()
 
       // let canvas = document.createElement('canvas')
@@ -98,7 +105,7 @@ export default {
       // 水印
       const drawTextParams = {
         lineHeight: 50,
-        font: helveticaFont,
+        font: customFont,
         size: 16,
         color: rgb(0.08, 0.08, 0.2),
         rotate: degrees(15),
@@ -114,11 +121,11 @@ export default {
           let lineNum = 0
           for (let iy = 50; iy <= height; iy += 200) { // 水印纵向间隔
             lineNum++
-            // currentPage.drawText(`xuhuajiao`+ this.formateTime(), {
-            //   x: lineNum & 1 ? ix : ix + 60,
-            //   y: iy,
-            //   ...drawTextParams
-            // })
+            currentPage.drawText('徐华姣'+ this.formateTime(), {
+              x: lineNum & 1 ? ix : ix + 60,
+              y: iy,
+              ...drawTextParams
+            })
           }
         }
       }
@@ -129,54 +136,54 @@ export default {
       console.log('pdf_pages',this.pdf_pages)
       this.$nextTick(() => this.renderPagePdf());
 
-      let dom = document.getElementsByClassName('page')
-      let canvas = document.createElement('canvas')
-      let cxt = canvas.getContext('2d')
-      let divImg = document.createElement('div')
+      // let dom = document.getElementsByClassName('page')
+      // let canvas = document.createElement('canvas')
+      // let cxt = canvas.getContext('2d')
+      // let divImg = document.createElement('div')
 
-      let imgScale = 0.3
-      //创建新的图片对象
-      let img = new Image();
-      //指定图片的URL
-      img.src = this.logo;
-      //浏览器加载图片完毕后再绘制图片
-      img.onload = function() {
-          //cxt.drawImage(img,0,0);
-          cxt.rotate(-20 * Math.PI / 180)
-          let whScale = img.width / img.height
-          cxt.clearRect(0, 0, canvas.width, canvas.height);
-          cxt.drawImage(img, //规定要使用的图像、画布或视频。
-                          0, 0, //开始剪切的 x 坐标位置。
-                          img.width, img.height,  //被剪切图像的高度。
-                          0, 50,//在画布上放置图像的 x 、y坐标位置。
-                          img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
-                          )
-          divImg.style.opacity = 0.3
-          divImg.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
-          drawImage2(divImg,dom) 
-      }
+      // let imgScale = 0.3
+      // //创建新的图片对象
+      // let img = new Image();
+      // //指定图片的URL
+      // img.src = this.logo;
+      // //浏览器加载图片完毕后再绘制图片
+      // img.onload = function() {
+      //     //cxt.drawImage(img,0,0);
+      //     cxt.rotate(-20 * Math.PI / 180)
+      //     let whScale = img.width / img.height
+      //     cxt.clearRect(0, 0, canvas.width, canvas.height);
+      //     cxt.drawImage(img, //规定要使用的图像、画布或视频。
+      //                     0, 0, //开始剪切的 x 坐标位置。
+      //                     img.width, img.height,  //被剪切图像的高度。
+      //                     0, 50,//在画布上放置图像的 x 、y坐标位置。
+      //                     img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
+      //                     )
+      //     divImg.style.opacity = 0.3
+      //     divImg.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
+      //     drawImage2(divImg,dom) 
+      // }
 
-      function drawImage2 (div,dom) {
-        div.style.pointerEvents = 'none'
-          div.className = 'weterbox'
-          div.style.top = 0
-          div.style.left = 0
-          div.style.position = 'absolute'
-          div.style.zIndex = '100000'
-          div.style.width = '100%'
-          div.style.height = '100%'
-        // console.log(dom) 
-        if( dom.length > 0){
-            for(let i = 0; i< dom.length;i++){
-                let child = dom[i].getElementsByClassName('weterbox')
-                if(child.length > 0){
-                    dom[i].removeChild(child[0])
-                }
-                dom[i].appendChild(div.cloneNode(true))
-              //  console.log(i,dom[i])
-            }
-        }
-      }
+      // function drawImage2 (div,dom) {
+      //   div.style.pointerEvents = 'none'
+      //     div.className = 'weterbox'
+      //     div.style.top = 0
+      //     div.style.left = 0
+      //     div.style.position = 'absolute'
+      //     div.style.zIndex = '100000'
+      //     div.style.width = '100%'
+      //     div.style.height = '100%'
+      //   // console.log(dom) 
+      //   if( dom.length > 0){
+      //       for(let i = 0; i< dom.length;i++){
+      //           let child = dom[i].getElementsByClassName('weterbox')
+      //           if(child.length > 0){
+      //               dom[i].removeChild(child[0])
+      //           }
+      //           dom[i].appendChild(div.cloneNode(true))
+      //         //  console.log(i,dom[i])
+      //       }
+      //   }
+      // }
 
 
     },