fix：[模板管理]导出加水印

src/views/business/study/comp/tbbd/Xq.vue

@@ -29,7 +29,8 @@
         <div class="detail-content" style="width: 100%; height: 100%;">
           <vue-html2pdf :show-layout="true" pdf-content-width="100%" :pdf-format="form.templatePdfSize" :pdf-quality="2"
             :float-layout="false" pdf-orientation="landscape" :paginate-elements-by-height="0" :enable-download="true"
-            :preview-modal="false"  :filename="form.bdmc" ref="html2Pdf" @progress="onProgress">
+            :preview-modal="false" :filename="form.bdmc" @beforeDownload="addDynamicWatermark" ref="html2Pdf"
+            @progress="onProgress">
             <section slot="pdf-content">
               <div class="pdf-content">
                 <TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="detail" />
@@ -56,13 +57,19 @@
                       </tr>
                     </tbody>
                   </table>
-                  <div class="content-title" style="margin-top: 10px;" v-show="jcgjlxExport!=999">
+                  <div class="content-title" style="margin-top: 10px;" v-show="jcgjlxExport != 999">
                     <div class="line"></div>
                     <div class="subtitle"> {{ $t('page.business.study.studyFormFill.jcgj') }}</div>
                   </div>
-                  <JcgjList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport!=999"/>
+                  <JcgjList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport != 999" />
                 </div>
               </div>
+              <div v-if="showExport" id="watermark-overlay"  ref="watermarkContainer" :style="{
+                '--watermark-text': `'${watermarkText}'`,
+                '--watermark-opacity': opacity,
+                '--watermark-size': '14px',
+                '--watermark-color': 'red'
+              }"></div>
             </section>
           </vue-html2pdf>
           <div style="padding: 0px 20px 0px 30px;margin-left: 10px;">
@@ -146,12 +153,17 @@ import { studyFormFill_jcgjqmxxList, studyFormFill_tb, studyFormFill_info, study
 import { mapGetters } from 'vuex'
 import JcgjList from "@/views/business/comps/common/JcgjList";
 import TemplateTable from '@/views/business/comps/template/TemplateTable';
+import moment from "moment";
 import VueHtml2pdf from 'vue-html2pdf'
 export default {
   name: "Xq",
   components: { JcgjList, TemplateTable, VueHtml2pdf },
   data() {
     return {
+      watermarkText:'',
+      opacity: 0.8,
+      watermarkOpacity: 0.8,
+      watermarkSize: 40,
       openApprove: false,
       formApprove: {
         id: null,
@@ -200,7 +212,7 @@ export default {
       showExport: false,
       qmxxExportList: [],
       jcgjExportList: [],
-      jcgjlxExport:0
+      jcgjlxExport: 0
     }
   },
   computed: {
@@ -211,6 +223,32 @@ export default {
   created() {
   },
   methods: {
+    updateWatermark() {
+      // 创建水印背景
+      const text = this.nickName +' '+ moment().format("YYYY-MM-DD HH:mm:ss");
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+
+      // 设置canvas尺寸
+      canvas.width = 300;
+      canvas.height = 300;
+
+      // 绘制水印
+      ctx.fillStyle = `rgba(255, 0, 0,  ${this.opacity})`;
+      ctx.font = '12px Arial';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+
+      // 旋转45度
+      ctx.translate(canvas.width / 2, canvas.height / 2);
+      ctx.rotate(-45 * Math.PI / 180);
+      ctx.fillText(text, 0, 0);
+
+      // 设置为背景
+      const container = this.$refs.watermarkContainer;
+      container.style.backgroundImage = `url(${canvas.toDataURL()})`;
+      container.style.backgroundRepeat = 'repeat';
+    },
     onProgress(progress) {
       console.log(`生成进度: ${progress}%`)
       this.removePageBreak()
@@ -221,17 +259,76 @@ export default {
     },
     exportExcel(jcgjlx) {
       this.$modal.loading()
-      this.jcgjlxExport=jcgjlx
+      this.jcgjlxExport = jcgjlx
       this.showExport = true
       studyFormFill_jcgjqmxxList({ jcgjlx: jcgjlx, id: this.form.id }).then(response => {
         this.jcgjExportList = response.data.jcgj
         this.qmxxExportList = response.data.qmxx
+        this.updateWatermark()
         this.$refs.jcgjExportList.init(this.jcgjExportList)
         setTimeout(() => {
           this.$refs.html2Pdf.generatePdf()
         }, 200);
       })
     },
+    //添加水印
+    async addDynamicWatermark({ pdfContent }) {
+      return new Promise((resolve) => {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        // 获取内容区域尺寸
+        const rect = this.$refs.contentArea.getBoundingClientRect()
+        canvas.width = rect.width
+        canvas.height = rect.height
+
+        // 绘制动态水印
+        ctx.fillStyle = `rgba(100, 100, 100, ${this.watermarkOpacity})`
+        ctx.font = `${this.watermarkSize}px Arial`
+        ctx.textAlign = 'center'
+        ctx.textBaseline = 'middle'
+
+        // 计算水印密度
+        const stepX = 300
+        const stepY = 200
+
+        // 绘制倾斜水印
+        ctx.save()
+        ctx.translate(canvas.width / 2, canvas.height / 2)
+        ctx.rotate(-Math.PI / 4) // 45度倾斜
+
+        for (let x = -canvas.width; x < canvas.width * 2; x += stepX) {
+          for (let y = -canvas.height; y < canvas.height * 2; y += stepY) {
+            // 动态水印内容
+            const dynamicText = `${this.watermarkText} - ${this.getCurrentTime()}`
+            ctx.fillText(dynamicText, x, y)
+          }
+        }
+        ctx.restore()
+
+        // 创建水印层
+        const watermarkLayer = document.createElement('div')
+        watermarkLayer.className = 'watermark-layer'
+        watermarkLayer.style.cssText = `
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          background-image: url(${canvas.toDataURL('image/png')});
+          background-repeat: repeat;
+          z-index: 9999;
+        `
+
+        // 插入水印
+        this.$refs.contentArea.style.position = 'relative'
+        this.$refs.contentArea.appendChild(watermarkLayer)
+
+        // 等待渲染
+        setTimeout(() => resolve(), 100)
+      })
+    },
     //移除分页空白
     removePageBreak() {
       document.querySelectorAll('.html2pdf__page-break').forEach(el => {
@@ -346,9 +443,20 @@ export default {
 .pdf-content {
   padding: 20px;
   font-family: Arial, sans-serif;
-  page-break-inside: avoid !important;
-  break-inside: avoid !important;
-   page-break-after: avoid !important;
+
+  
+}
+#watermark-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.6;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 10;
+  color: red;
 }
 
 .pdf-content h1 {
@@ -427,4 +535,21 @@ export default {
 .html2pdf__page-break {
   display: none !important;
 }
+
+
+.content {
+  position: relative;
+  z-index: 1;
+}
+
+.controls {
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #f5f5f5;
+}
+
+input {
+  margin: 0 10px;
+  padding: 8px;
+}
 </style>