fix:[表单模板]优化

src/api/business/study/studyFormFill.js

@@ -16,6 +16,14 @@ export function studyFormFill_jcgj(query) {
     params: query
   })
 }
+export function studyFormFill_uploadFile(data) {
+  return request({
+    url: '/file/upload',
+    method: 'post',
+    data: data
+  })
+}
+
 //导出
 export function studyFormFill_exportDetail(query) {
   return request({
@@ -24,6 +32,13 @@ export function studyFormFill_exportDetail(query) {
     params: query
   })
 }
+export function studyFormFill_exportByFileUrl(query) {
+  return request({
+    url: '/system/business/studyFormFill/exportByFileUrl',
+    method: 'get',
+    params: query
+  })
+}
 export function studyFormFill_jcgjqmxxList(query) {
   return request({
     url: '/system/business/studyFormFill/jcgjqmxxList',

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

@@ -28,8 +28,8 @@
       <div class="edit-content">
         <div class="detail-content" style="width: 100%; height: 100%; padding: 0px 10px;">
           <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" @beforeDownload="addDynamicWatermark" ref="html2Pdf"
+            :float-layout="false" pdf-orientation="landscape" :paginate-elements-by-height="0" :enable-download="false"
+            :preview-modal="false" :filename="form.bdmc" @beforeDownload="handleBeforeDownload" ref="html2Pdf"
             @progress="onProgress">
             <section slot="pdf-content">
               <div class="pdf-content">
@@ -150,7 +150,8 @@
 </template>
 
 <script>
-import { studyFormFill_jcgjqmxxList, studyFormFill_tb, studyFormFill_info, studyFormFill_jcgj, studyFormFill_qmxx, studyFormFill_exportDetail } from "@/api/business/study/studyFormFill"
+import { studyFormFill_jcgjqmxxList, studyFormFill_uploadFile, studyFormFill_exportByFileUrl, studyFormFill_tb, studyFormFill_info, studyFormFill_jcgj, studyFormFill_qmxx, studyFormFill_exportDetail } from "@/api/business/study/studyFormFill"
+import { getToken } from "@/utils/auth"
 import { mapGetters } from 'vuex'
 import JcgjList from "@/views/business/comps/common/JcgjList";
 import JcgjExportList from "@/views/business/comps/common/JcgjExportList";
@@ -163,6 +164,7 @@ export default {
   data() {
     return {
       watermarkText: '',
+      uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload', // 上传文件服务器地址
       opacity: 0.8,
       watermarkOpacity: 0.8,
       watermarkSize: 40,
@@ -225,6 +227,7 @@ export default {
   created() {
   },
   methods: {
+    //创建水印-弃用
     updateWatermark() {
       // 创建水印背景
       const text = this.nickName + ' ' + moment().format("YYYY-MM-DD HH:mm:ss");
@@ -251,37 +254,7 @@ export default {
       container.style.backgroundImage = `url(${canvas.toDataURL()})`;
       container.style.backgroundRepeat = 'repeat';
     },
-    onProgress(progress) {
-      console.log(`生成进度: ${progress}%`)
-      this.removePageBreak()
-      if (progress == 100) {
-        this.showExport = false
-        this.$modal.closeLoading()
-      }
-    },
-    exportExcel(jcgjlx) {
-      this.$modal.loading()
-      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({
-            margin: {
-              top: 20,
-              right: 15,
-              bottom: 20,
-              left: 15
-            },
-          })
-        }, 200);
-        this.saveSimpleLog({jcmc:'填报表单详情导出',jcmcEn:'Record Detail Export',name:this.form.bdmc+'（'+this.form.bdbh+'）',nameEn:this.form.bdmc+'（'+this.form.bdbh+'）'})
-      })
-    },
-    //添加水印
+    //添加水印-弃用
     async addDynamicWatermark({ pdfContent }) {
       return new Promise((resolve) => {
         const canvas = document.createElement('canvas')
@@ -336,12 +309,105 @@ export default {
         setTimeout(() => resolve(), 100)
       })
     },
+    //生成进度
+    onProgress(progress) {
+      console.log(`生成进度: ${progress}%`)
+      this.removePageBreak()
+      if (progress == 100) {
+        this.showExport = false
+        // this.$modal.closeLoading()
+      }
+    },
+    //导出
+    exportExcel(jcgjlx) {
+      this.$modal.loading()
+      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({
+            margin: {
+              top: 20,
+              right: 15,
+              bottom: 20,
+              left: 15
+            },
+          })
+        }, 200);
+        this.saveSimpleLog({ jcmc: '填报表单详情导出', jcmcEn: 'Record Detail Export', name: this.form.bdmc + '（' + this.form.bdbh + '）', nameEn: this.form.bdmc + '（' + this.form.bdbh + '）' })
+      })
+    },
+    //获取文件blog
+    async handleBeforeDownload({ html2pdf, options, pdfContent }) {
+      this.$modal.loading()
+      // 1. 使用 html2pdf 手动构建 PDF，并获取底层的 jsPDF 实例
+      const pdf = await html2pdf()
+        .set(options)      // 应用你的配置选项
+        .from(pdfContent)  // 指定 PDF 内容
+        .toPdf()           // 转换为 PDF
+        .get('pdf');       // 获取 jsPDF 实例
+
+      // 2. 从 jsPDF 实例中输出 Blob 对象
+      const blob = pdf.output('blob');
+
+      // 3. 将 Blob 上传到你的服务器
+      await this.uploadPdfToServer(blob);
+
+      // 注意：如果你还想让文件自动下载，可以在这里调用 .save()
+      // pdf.save('my-document.pdf');
+    },
+    //上传到服务器
+    async uploadPdfToServer(blob) {
+      const formData = new FormData();
+      formData.append('file', blob, 'hxhq-export-form.pdf');
+      try {
+        const response = await fetch(this.uploadFileUrl, {
+          method: 'POST',
+          headers: {
+            Authorization: "Bearer " + getToken(),
+          },
+          body: formData
+        });
+        // 检查响应状态
+        if (!response.ok) {
+          // 如果响应不成功，可以尝试获取错误信息
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+        }
+        // 获取 JSON 数据
+        const data = await response.json();
+        // console.log('返回的JSON数据:', data);
+        if (data.code == 200) {
+          studyFormFill_exportByFileUrl(
+            {
+              url: data.data.url,
+              studyFormFillId: this.form.id,
+            }
+          ).then(response => {
+            window.open(process.env.VUE_APP_FILE_DOMAIN + response.msg)
+          }).finally(() => {
+            this.$modal.closeLoading()
+          })
+        } else {
+          this.$modal.msgError(data.msg)
+          this.$modal.closeLoading()
+        }
+      } catch (error) {
+        this.$modal.msgError("导出失败，稍后再试")
+        this.$modal.closeLoading()
+      }
+    },
     //移除分页空白
     removePageBreak() {
       document.querySelectorAll('.html2pdf__page-break').forEach(el => {
         el.remove()
       })
     },
+    //导出服务器-弃用
     exportExcel_bak(jcgjlx) {
       this.$modal.loading()
       studyFormFill_exportDetail(_.merge({}, this.queryParamsJcgj, { jcgjlx: jcgjlx, lang: this.$store.getters.language.split("_")[0] })).then(response => {
@@ -352,8 +418,8 @@ export default {
     },
     getJjcgjList(val) {
       this.$modal.loading()
-      if(val){
-        this.queryParamsJcgj=_.merge({}, this.queryParamsJcgj, val)
+      if (val) {
+        this.queryParamsJcgj = _.merge({}, this.queryParamsJcgj, val)
       }
       studyFormFill_jcgj(this.queryParamsJcgj).then(response => {
         this.jcgjList = response.rows