fix:[模板管理]导出

src/App.vue

@@ -329,7 +329,9 @@ td,
 th {
   page-break-inside: avoid;
 }
-
+ .page-break {
+    page-break-before: always;
+  }
 
 .datatable {
   border-collapse: collapse;

src/components/Template/BaseInfoFormPackage.vue

@@ -267,6 +267,7 @@ export default {
 .c-Item {
     // &:not(:last-child) {
         margin-bottom: 16px;
+    page-break-inside: avoid;
     // }
 }
 
@@ -315,12 +316,10 @@ export default {
 }
 
 .flex1 {
-    page-break-inside: avoid;
     flex: 1;
 }
 
 .flex {
-    page-break-inside: avoid;
     display: flex;
 }
 

src/components/Template/Step.vue

@@ -495,7 +495,9 @@ export default {
 		flex:1
 	}
 	.step-list {
+		padding-top: 10px;
 		.step-list-item {
+            page-break-inside: avoid;
 			margin-top: 10px;
 			border-radius: 6px;
 			overflow: hidden;

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

@@ -268,7 +268,9 @@ export default {
         this.updateWatermark()
         this.$refs.jcgjExportList.init(this.jcgjExportList)
         setTimeout(() => {
-          this.$refs.html2Pdf.generatePdf()
+          this.$refs.html2Pdf.generatePdf({
+            margin:[20,10,20,10]
+          })
         }, 200);
       })
     },
@@ -278,10 +280,9 @@ export default {
         const canvas = document.createElement('canvas')
         const ctx = canvas.getContext('2d')
 
-        // 获取内容区域尺寸
-        const rect = this.$refs.contentArea.getBoundingClientRect()
-        canvas.width = rect.width
-        canvas.height = rect.height
+        // 设置canvas尺寸
+        canvas.width = 300;
+        canvas.height = 300;
 
         // 绘制动态水印
         ctx.fillStyle = `rgba(100, 100, 100, ${this.watermarkOpacity})`
@@ -298,10 +299,11 @@ export default {
         ctx.translate(canvas.width / 2, canvas.height / 2)
         ctx.rotate(-Math.PI / 4) // 45度倾斜
 
+        let time=moment().format("YYYY-MM-DD HH:mm:ss")
         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()}`
+            const dynamicText = `${this.watermarkText} - ${time}`
             ctx.fillText(dynamicText, x, y)
           }
         }
@@ -322,10 +324,6 @@ export default {
           z-index: 9999;
         `
 
-        // 插入水印
-        this.$refs.contentArea.style.position = 'relative'
-        this.$refs.contentArea.appendChild(watermarkLayer)
-
         // 等待渲染
         setTimeout(() => resolve(), 100)
       })

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

@@ -268,7 +268,9 @@ export default {
         this.updateWatermark()
         this.$refs.jcgjExportList.init(this.jcgjExportList)
         setTimeout(() => {
-          this.$refs.html2Pdf.generatePdf()
+          this.$refs.html2Pdf.generatePdf({
+            margin:[20,10,20,10]
+          })
         }, 200);
       })
     },
@@ -278,10 +280,9 @@ export default {
         const canvas = document.createElement('canvas')
         const ctx = canvas.getContext('2d')
 
-        // 获取内容区域尺寸
-        const rect = this.$refs.contentArea.getBoundingClientRect()
-        canvas.width = rect.width
-        canvas.height = rect.height
+        // 设置canvas尺寸
+        canvas.width = 300;
+        canvas.height = 300;
 
         // 绘制动态水印
         ctx.fillStyle = `rgba(100, 100, 100, ${this.watermarkOpacity})`
@@ -298,10 +299,11 @@ export default {
         ctx.translate(canvas.width / 2, canvas.height / 2)
         ctx.rotate(-Math.PI / 4) // 45度倾斜
 
+        let time=moment().format("YYYY-MM-DD HH:mm:ss")
         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()}`
+            const dynamicText = `${this.watermarkText} - ${time}`
             ctx.fillText(dynamicText, x, y)
           }
         }
@@ -322,9 +324,6 @@ export default {
           z-index: 9999;
         `
 
-        // 插入水印
-        this.$refs.contentArea.style.position = 'relative'
-        this.$refs.contentArea.appendChild(watermarkLayer)
 
         // 等待渲染
         setTimeout(() => resolve(), 100)

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

@@ -64,7 +64,7 @@
                   <JcgjExportList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport != 999" />
                 </div>
               </div>
-              <div v-if="showExport" id="watermark-overlay"  ref="watermarkContainer" :style="{
+              <div v-if="showExport" id="watermark-overlay" ref="watermarkContainer" :style="{
                 '--watermark-text': `'${watermarkText}'`,
                 '--watermark-opacity': opacity,
                 '--watermark-size': '14px',
@@ -158,10 +158,10 @@ import moment from "moment";
 import VueHtml2pdf from 'vue-html2pdf'
 export default {
   name: "Xq",
-  components: { JcgjExportList,JcgjList, TemplateTable, VueHtml2pdf },
+  components: { JcgjExportList, JcgjList, TemplateTable, VueHtml2pdf },
   data() {
     return {
-      watermarkText:'',
+      watermarkText: '',
       opacity: 0.8,
       watermarkOpacity: 0.8,
       watermarkSize: 40,
@@ -226,7 +226,7 @@ export default {
   methods: {
     updateWatermark() {
       // 创建水印背景
-      const text = this.nickName +' '+ moment().format("YYYY-MM-DD HH:mm:ss");
+      const text = this.nickName + ' ' + moment().format("YYYY-MM-DD HH:mm:ss");
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');
 
@@ -268,7 +268,14 @@ export default {
         this.updateWatermark()
         this.$refs.jcgjExportList.init(this.jcgjExportList)
         setTimeout(() => {
-          this.$refs.html2Pdf.generatePdf()
+          this.$refs.html2Pdf.generatePdf({
+            margin: {
+              top: 20,
+              right: 15,
+              bottom: 20,
+              left: 15
+            },
+          })
         }, 200);
       })
     },
@@ -278,10 +285,10 @@ export default {
         const canvas = document.createElement('canvas')
         const ctx = canvas.getContext('2d')
 
-        // 获取内容区域尺寸
-        const rect = this.$refs.contentArea.getBoundingClientRect()
-        canvas.width = rect.width
-        canvas.height = rect.height
+        // 设置canvas尺寸
+        canvas.width = 300;
+        canvas.height = 300;
+
 
         // 绘制动态水印
         ctx.fillStyle = `rgba(100, 100, 100, ${this.watermarkOpacity})`
@@ -297,11 +304,11 @@ export default {
         ctx.save()
         ctx.translate(canvas.width / 2, canvas.height / 2)
         ctx.rotate(-Math.PI / 4) // 45度倾斜
-
+        let time=moment().format("YYYY-MM-DD HH:mm:ss")
         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()}`
+            const dynamicText = `${this.watermarkText} - ${time}`
             ctx.fillText(dynamicText, x, y)
           }
         }
@@ -322,9 +329,6 @@ export default {
           z-index: 9999;
         `
 
-        // 插入水印
-        this.$refs.contentArea.style.position = 'relative'
-        this.$refs.contentArea.appendChild(watermarkLayer)
 
         // 等待渲染
         setTimeout(() => resolve(), 100)
@@ -445,8 +449,9 @@ export default {
   padding: 0px;
   font-family: Arial, sans-serif;
 
-  
+
 }
+
 #watermark-overlay {
   position: absolute;
   top: -80px;