cloud-web-corejs 1.0.54-dev.284 → 1.0.54-dev.286

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.284",
+  "version": "1.0.54-dev.286",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

package/src/components/VabUpload/view.vue

@@ -1,135 +1,135 @@
-<template>
-  <div>
-    <div id="uploadImage" :class="classList">
-      <div class="upload-list" model="singer" v-for="(attachment, index) in attachments" :key="index"
-           style="display: inline-block;vertical-align: middle;float: left;">
-        <template v-if="$attrs.hideInfo !== true && $attrs.hideInfo !== 'true'">
-          <div class="upload-box">
-            <ul class="el-upload-list el-upload-list--picture">
-              <li tabindex="0" class="el-upload-list__item">
-                <div>
-                  <div class="el-upload-list__item-thumbnail">
-                    <div class="show-video" v-if="hasPreview(attachment)" @click="openPreview(attachment,index)"><i
-                      class="icon-chakan"></i></div>
-                    <p>
-                      <el-image
-                        :src="getShowUrl(attachment)"
-                        @click="openPreview(attachment,index)"
-                        :z-index="999999"
-                      />
-                    </p>
-                  </div>
-                  <div class="el-upload-list__item-name">
-                    <el-tooltip :enterable="false" class="item" effect="dark" :content="getAttachmentName(attachment)"
-                                placement="top">
-                      <p v-if="$attrs.hideName !== true">{{ getAttachmentName(attachment) }}</p>
-                    </el-tooltip>
-                    <p v-if="$attrs.showSize === true || $attrs.showSize === 'true'">
-                      {{ formatFileSize(attachment.fileSize) }}</p>
-<!--                    <p v-if="$attrs.showSortInput !== true && !dataType && $attrs.createBy !== false">
-                      {{ attachment.createBy }}</p>-->
-                    <p v-if="$attrs.showSortInput !== true && !dataType && $attrs.createDate !== false">
-                      {{ attachment.createDate }}</p>
-                  </div>
-                  <div class="el-upload-input" v-if="$attrs.showSortInput">
-                    <base-input-number v-model="attachment.orders" class="button-sty"
-                                       :placeholder="$t2('序号', 'components.VabUpload.orders')" :scale="0"/>
-                  </div>
-                  <div class="el-upload-input" v-if="$attrs.showNameInput">
-                    <el-input v-model="attachment.name" class="button-sty"
-                              :placeholder="$t2('请输入名称', 'components.VabUpload.name')" :scale="0"/>
-                  </div>
-                  <div class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i>
-                  </div>
-                  <div class="el-icon-close" @click="deleteFile(index)"
-                       v-if="$attrs.edit !== false && $attrs.edit !== 'false' && attachment.h5!==1">
-                    <i class="el-tooltip iconfont iconshanchu" aria-describedby="el-tooltip-6144" tabindex="0"></i>
-                  </div>
-                  <div class="el-icon-tagEdit" v-if="attachment.h5!==1">
-                    <el-tooltip class="item" effect="dark" :content="$t2('下载', 'system.button.download')"
-                                placement="top">
-                      <i class="el-icon-download"
-                         @click="downloadFile(attachment)"></i>
-                    </el-tooltip>
-                    <el-tooltip class="item" effect="dark" :content="$t2('详情', 'components.VabUpload.detail')"
-                                placement="top"
-                                v-if="attachment && attachment.id && $attrs.showProperties!==false && !dataType">
-                      <i class="iconfont icon-shuxing" @click="openPropertiesDialog(attachment)"></i>
-                    </el-tooltip>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </template>
-        <template v-else>
-          <a>
-            <el-image
-              :src="getShowUrl(attachment)"
-              @click="openPreview(attachment,index)"
-              :z-index="999999"
-            />
-          </a>
-          <a href="javascript:void(0);" class="del" @click="deleteFile(index)"
-             v-if="$attrs.edit !== false && $attrs.edit !== 'false'"><i class="el-icon-error"></i></a>
-        </template>
-      </div>
-      <div class="el-upload el-upload--picture" style="vertical-align: middle;display: inline-block;float:left"
-           v-if="$attrs.edit !== false && $attrs.edit !== 'false'">
-        <button
-          type="button"
-          class=" avatar-uploader"
-          v-if="showUploadBtn"
-          @keyup.prevent
-          @keydown.enter.prevent
-          @click="
-            $baseUpload.open({
-              ..._props,
-              ...$attrs,
-              limit: limit,
-              multi:multi,
-              accept: accept ? accept : 'file',
-              auto: auto,
-              size: fileMaxSize,
-              chunkSize: chunkSize,
-              callback: fileConfirm,
-              pickPrivateProfile:pickPrivateProfile,
-              confirmUpload:confirmUpload,
-              otherParams:$attrs
-            })
-          "
-        >
-          <i class="el-icon-plus avatar-uploader-icon"></i>
-        </button>
-      </div>
-    </div>
-    <propertiesDialog v-if="showPropertiesDialog" :visiable.sync="showPropertiesDialog"
-                      :editAttachment.sync="editAttachment" :edit.sync="$attrs.edit"></propertiesDialog>
-    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :initial-index.sync="chooseIndex"
-                     :url-list="pictureDtoList"/>
-  </div>
-</template>
-
-<script>
-import {viewMixins} from './mixins';
-
-export default {
-  mixins: [viewMixins],
-  components: {propertiesDialog: () => import('./propertiesDialog.vue'), ElImageViewer: () => import('./image-viewer')},
-  computed:{
-    classList(){
-      // 'upload-img': this.dataType || (this.$attrs.hideInfo == true || this.$attrs.hideInfo == 'true')
-      let arr = [];
-      if(this.dataType || (this.$attrs.hideInfo == true || this.$attrs.hideInfo == 'true')){
-        arr.push('upload-img')
-      }
-      let widgetSize = this.$attrs.widgetSize || 2
-      if(widgetSize){
-        let str1 = "widgetSize-" + widgetSize
-        arr.push(str1)
-      }
-      return arr
-    },
-  }
-};
-</script>
+<template>
+  <div>
+    <div id="uploadImage" :class="classList">
+      <div class="upload-list" model="singer" v-for="(attachment, index) in attachments" :key="index"
+           style="display: inline-block;vertical-align: middle;float: left;">
+        <template v-if="$attrs.hideInfo !== true && $attrs.hideInfo !== 'true'">
+          <div class="upload-box">
+            <ul class="el-upload-list el-upload-list--picture">
+              <li tabindex="0" class="el-upload-list__item">
+                <div>
+                  <div class="el-upload-list__item-thumbnail">
+                    <div class="show-video" v-if="hasPreview(attachment)" @click="openPreview(attachment,index)"><i
+                      class="icon-chakan"></i></div>
+                    <p>
+                      <el-image
+                        :src="getShowUrl(attachment)"
+                        @click="openPreview(attachment,index)"
+                        :z-index="999999"
+                      />
+                    </p>
+                  </div>
+                  <div class="el-upload-list__item-name">
+                    <el-tooltip :enterable="false" class="item" effect="dark" :content="getAttachmentName(attachment)"
+                                placement="top">
+                      <p v-if="$attrs.hideName !== true">{{ getAttachmentName(attachment) }}</p>
+                    </el-tooltip>
+                    <p v-if="$attrs.showSize === true || $attrs.showSize === 'true'">
+                      {{ formatFileSize(attachment.fileSize) }}</p>
+<!--                    <p v-if="$attrs.showSortInput !== true && !dataType && $attrs.createBy !== false">
+                      {{ attachment.createBy }}</p>-->
+                    <p v-if="$attrs.showSortInput !== true && !dataType && $attrs.createDate !== false">
+                      {{ attachment.createDate }}</p>
+                  </div>
+                  <div class="el-upload-input" v-if="$attrs.showSortInput">
+                    <base-input-number v-model="attachment.orders" class="button-sty"
+                                       :placeholder="$t2('序号', 'components.VabUpload.orders')" :scale="0"/>
+                  </div>
+                  <div class="el-upload-input" v-if="$attrs.showNameInput">
+                    <el-input v-model="attachment.name" class="button-sty"
+                              :placeholder="$t2('请输入名称', 'components.VabUpload.name')" :scale="0"/>
+                  </div>
+                  <div class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i>
+                  </div>
+                  <div class="el-icon-close" @click="deleteFile(index)"
+                       v-if="$attrs.edit !== false && $attrs.edit !== 'false' && attachment.h5!==1">
+                    <i class="el-tooltip iconfont iconshanchu" aria-describedby="el-tooltip-6144" tabindex="0"></i>
+                  </div>
+                  <div class="el-icon-tagEdit" v-if="attachment.h5!==1">
+                    <el-tooltip class="item" effect="dark" :content="$t2('下载', 'system.button.download')"
+                                placement="top">
+                      <i class="el-icon-download"
+                         @click="downloadFile(attachment)"></i>
+                    </el-tooltip>
+                    <el-tooltip class="item" effect="dark" :content="$t2('详情', 'components.VabUpload.detail')"
+                                placement="top"
+                                v-if="attachment && attachment.id && $attrs.showProperties!==false && !dataType">
+                      <i class="iconfont icon-shuxing" @click="openPropertiesDialog(attachment)"></i>
+                    </el-tooltip>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </template>
+        <template v-else>
+          <a>
+            <el-image
+              :src="getShowUrl(attachment)"
+              @click="openPreview(attachment,index)"
+              :z-index="999999"
+            />
+          </a>
+          <a href="javascript:void(0);" class="del" @click="deleteFile(index)"
+             v-if="$attrs.edit !== false && $attrs.edit !== 'false'"><i class="el-icon-error"></i></a>
+        </template>
+      </div>
+      <div class="el-upload el-upload--picture" style="vertical-align: middle;display: inline-block;float:left"
+           v-if="$attrs.edit !== false && $attrs.edit !== 'false'">
+        <button
+          type="button"
+          class=" avatar-uploader"
+          v-if="showUploadBtn"
+          @keyup.prevent
+          @keydown.enter.prevent
+          @click="
+            $baseUpload.open({
+              ..._props,
+              ...$attrs,
+              limit: limit,
+              multi:multi,
+              accept: accept ? accept : 'file',
+              auto: auto,
+              size: fileMaxSize,
+              chunkSize: chunkSize,
+              callback: fileConfirm,
+              pickPrivateProfile:pickPrivateProfile,
+              confirmUpload:confirmUpload,
+              otherParams:$attrs
+            })
+          "
+        >
+          <i class="el-icon-plus avatar-uploader-icon"></i>
+        </button>
+      </div>
+    </div>
+    <propertiesDialog v-if="showPropertiesDialog" :visiable.sync="showPropertiesDialog"
+                      :editAttachment.sync="editAttachment" :edit.sync="$attrs.edit"></propertiesDialog>
+    <el-image-viewer v-if="showViewer" :on-close="closeViewer" :initial-index.sync="chooseIndex"
+                     :url-list="pictureDtoList"/>
+  </div>
+</template>
+
+<script>
+import {viewMixins} from './mixins';
+
+export default {
+  mixins: [viewMixins],
+  components: {propertiesDialog: () => import('./propertiesDialog.vue'), ElImageViewer: () => import('./image-viewer')},
+  computed:{
+    classList(){
+      // 'upload-img': this.dataType || (this.$attrs.hideInfo == true || this.$attrs.hideInfo == 'true')
+      let arr = [];
+      if(this.dataType || (this.$attrs.hideInfo == true || this.$attrs.hideInfo == 'true')){
+        arr.push('upload-img')
+      }
+      let widgetSize = this.$attrs.widgetSize || 2
+      if(widgetSize){
+        let str1 = "widgetSize-" + widgetSize
+        arr.push(str1)
+      }
+      return arr
+    },
+  }
+};
+</script>

package/src/components/xform/form-render/indexMixin.js

@@ -2538,6 +2538,115 @@ modules = {
     async exportPdf() {
         // statusEl.style.display = 'block';
         // statusEl.textContent = '正在准备导出内容...';
+      const loadingObj = this.$baseLoading();
+        try {
+          // 获取要导出的元素
+            const element = this.$parent.$el;
+            // 计算内容总高度
+
+
+            // 克隆元素（不影响原始页面）
+            // statusEl.textContent = '克隆内容...';
+
+
+            const constainter = this.$parent.$parent.$el;
+
+
+            const clonedElement = element.cloneNode(true);
+            let wfTab = clonedElement.querySelector(".wf-tab");
+            if(wfTab)wfTab.remove()
+
+            clonedElement.style.width = element.offsetWidth + 'px';
+
+            // 应用样式以展开内容
+            clonedElement.style.height = 'auto';
+            clonedElement.style.overflow = 'visible';
+            clonedElement.style.position = 'absolute';
+            clonedElement.style.left = '-9999px';
+            // document.body.appendChild(clonedElement);
+            // document.body.appendChild(constainter);
+
+            constainter.appendChild(clonedElement)
+
+            const contentHeight = clonedElement.scrollHeight;
+            const contentWidth = clonedElement.offsetWidth;
+
+            // 设置PDF参数
+            const pdf = new JsPDF('p', 'mm', 'a4');
+            const pageWidth = pdf.internal.pageSize.getWidth();
+            const pageHeight = pdf.internal.pageSize.getHeight();
+            const padding = 10;
+
+
+
+            // 计算需要多少页
+            const scale = pageWidth / contentWidth;
+            const scaledHeight = contentHeight * scale;
+            const pages = Math.ceil(scaledHeight / pageHeight);
+
+            // 分页捕获并添加到PDF
+            // statusEl.textContent = '正在生成PDF (0/' + pages + ')';
+
+            for (let i = 0; i < pages; i++) {
+                // 计算当前页的裁剪位置
+                const position = i * pageHeight / scale;
+
+                // 使用html2canvas捕获当前页内容
+                const canvas = await html2Canvas(clonedElement, {
+                    scale: 2,
+                    // useCORS: true,
+                    windowHeight: pageHeight / scale,
+                    y: position,
+                    height: pageHeight / scale,
+                    width: contentWidth,
+                    logging: false
+                });
+
+                // 将canvas转换为图像
+                const imgData = canvas.toDataURL('image/jpeg', 0.95);
+
+                // 添加新页面（第一页除外）
+                if (i > 0) {
+                    pdf.addPage();
+                }
+
+                // 将图像添加到PDF
+                pdf.addImage(imgData, 'JPEG', padding, padding, pageWidth - 2*padding, pageHeight - 2*padding);
+
+                // statusEl.textContent = '正在生成PDF (' + (i+1) + '/' + pages + ')';
+            }
+
+            // 移除克隆元素
+            // document.body.removeChild(constainter);
+            constainter.removeChild(clonedElement);
+
+            // 保存PDF
+            // statusEl.textContent = '正在保存文件...';
+            let fileName = this.reportTemplate.formName+".pdf";
+            pdf.save(fileName);
+
+            // statusEl.textContent = 'PDF导出成功！';
+            // statusEl.style.background = '#e8f5e9';
+            // statusEl.style.color = '#2e7d32';
+
+            // 3秒后隐藏状态
+           /* setTimeout(() => {
+                statusEl.style.display = 'none';
+            }, 3000); */
+
+        } catch (error) {
+            console.error('导出失败:', error);
+            // statusEl.textContent = '导出失败: ' + error.message;
+            // statusEl.style.background = '#ffebee';
+            // statusEl.style.color = '#c62828';
+        }finally{
+          loadingObj.close();
+        }
+    },
+
+    async exportPdf1() {
+        // statusEl.style.display = 'block';
+        // statusEl.textContent = '正在准备导出内容...';
 
         try {
 
@@ -2557,6 +2666,18 @@ modules = {
             let wfTab = clonedElement.querySelector(".wf-tab");
             if(wfTab)wfTab.remove()
 
+
+              const scrollElements = clonedElement.querySelectorAll('.vxe-table--body-wrapper')
+
+            // 临时禁用虚拟滚动
+            /* for(let scrollElement of scrollElements){
+              const originalScrollTop = scrollElement.scrollTop
+              // scrollElement.style = 'overflow:visible;max-height:inherit !important'
+                scrollElement.style = scrollElement.style+ 'overflow:visible;max-height:inherit !important;'
+              // scrollElement.style["max-height"] = 'inherit !important'
+              scrollElement.scrollTop = 0
+            } */
+
             clonedElement.style.width = element.offsetWidth + 'px';
 
             // 应用样式以展开内容
@@ -2567,6 +2688,114 @@ modules = {
             // document.body.appendChild(clonedElement);
             // document.body.appendChild(constainter);
 
+
+            /* let dom1 = clonedElement.querySelector(".detail-wrap")
+            debugger
+            if(dom1){
+              debugger
+              let dom2 = dom1.children[1];
+              dom2.style.height = "auto;"
+              dom2.querySelector(".d-cont").style.height = "auto;"
+
+            } */
+
+            constainter.appendChild(clonedElement)
+
+            html2Canvas(clonedElement, {
+                scrollY: 0,
+                useCORS: true,
+                allowTaint: true,
+                scale: 2 // 提高分辨率
+              }).then(canvas => {
+                const pdf = new JsPDF('p', 'mm', 'a4')
+                const imgData = canvas.toDataURL('image/png')
+                const imgWidth = 210 // A4宽度
+                const imgHeight = (canvas.height * imgWidth) / canvas.width
+
+                // 分页处理
+                let heightLeft = imgHeight
+                let position = 0
+                pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
+
+                while (heightLeft > 0) {
+                  position = heightLeft - imgHeight
+                  pdf.addPage()
+                  pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
+                  heightLeft -= 297 // A4高度
+                }
+
+                pdf.save(`导出.pdf`)
+
+                 constainter.removeChild(clonedElement);
+              })
+
+        } catch (error) {
+            console.error('导出失败:', error);
+            // statusEl.textContent = '导出失败: ' + error.message;
+            // statusEl.style.background = '#ffebee';
+            // statusEl.style.color = '#c62828';
+        }
+    },
+    async exportPdf2() {
+        // statusEl.style.display = 'block';
+        // statusEl.textContent = '正在准备导出内容...';
+
+        try {
+
+          // 获取要导出的元素
+            const element = this.$parent.$el;
+            // 计算内容总高度
+
+
+            // 克隆元素（不影响原始页面）
+            // statusEl.textContent = '克隆内容...';
+
+
+            const constainter = this.$parent.$parent.$el;
+
+
+            const clonedElement = element.cloneNode(true);
+            let wfTab = clonedElement.querySelector(".wf-tab");
+            if(wfTab)wfTab.remove()
+
+
+              const scrollElements = clonedElement.querySelectorAll('.vxe-table--body-wrapper')
+
+            // 临时禁用虚拟滚动
+            /* for(let scrollElement of scrollElements){
+              const originalScrollTop = scrollElement.scrollTop
+              // scrollElement.style = 'overflow:visible;max-height:inherit !important'
+                // scrollElement.style = scrollElement.style+ 'overflow:visible;max-height:inherit !important;'
+              scrollElement.style["overflow"] = 'visible'
+              scrollElement.style["max-height"] = 'inherit !important'
+              scrollElement.scrollTop = 0
+            } */
+
+
+let dom4 = clonedElement.querySelector(".designer-view")
+            // dom4.style.height = "auto;"
+            let dom1 = clonedElement.querySelector(".detail-wrap")
+            debugger
+            if(dom1){
+              debugger
+              // designer-view
+              let dom2 = dom1.children[1];
+              dom2.style.height = "auto;"
+              dom2.querySelector(".d-cont").style.height = "auto;"
+
+            }
+
+            clonedElement.style.width = element.offsetWidth + 'px';
+
+            // 应用样式以展开内容
+            clonedElement.style.height = 'auto';
+            clonedElement.style.overflow = 'visible';
+            clonedElement.style.position = 'absolute';
+            // clonedElement.style.left = '-9999px';
+            clonedElement.style.left = '100px';
+            // document.body.appendChild(clonedElement);
+            // document.body.appendChild(constainter);
+
             constainter.appendChild(clonedElement)
 
             const contentHeight = clonedElement.scrollHeight;
@@ -2585,9 +2814,9 @@ modules = {
             const scaledHeight = contentHeight * scale;
             const pages = Math.ceil(scaledHeight / pageHeight);
 
+            debugger
             // 分页捕获并添加到PDF
             // statusEl.textContent = '正在生成PDF (0/' + pages + ')';
-
             for (let i = 0; i < pages; i++) {
                 // 计算当前页的裁剪位置
                 const position = i * pageHeight / scale;
@@ -2640,6 +2869,204 @@ modules = {
             // statusEl.style.background = '#ffebee';
             // statusEl.style.color = '#c62828';
         }
+    },
+    async exportPdf4() {
+        // statusEl.style.display = 'block';
+        // statusEl.textContent = '正在准备导出内容...';
+
+        try {
+
+          // 获取要导出的元素
+            const element = this.$parent.$el;
+            // 计算内容总高度
+
+
+            // 克隆元素（不影响原始页面）
+            // statusEl.textContent = '克隆内容...';
+
+
+            const constainter = this.$parent.$parent.$el;
+
+
+            const clonedElement = element.cloneNode(true);
+            let wfTab = clonedElement.querySelector(".wf-tab");
+            if(wfTab)wfTab.remove()
+
+
+              const scrollElements = clonedElement.querySelectorAll('.vxe-table--body-wrapper')
+
+            // 临时禁用虚拟滚动
+            for(let scrollElement of scrollElements){
+              const originalScrollTop = scrollElement.scrollTop
+              // scrollElement.style = 'overflow:visible;max-height:inherit !important'
+                // scrollElement.style = scrollElement.style+ 'overflow:visible;max-height:inherit !important;'
+              scrollElement.style["overflow"] = 'visible'
+              scrollElement.style["max-height"] = 'inherit !important'
+              scrollElement.scrollTop = 0
+            }
+
+
+let dom4 = clonedElement.querySelector(".designer-view")
+            // dom4.style.height = "auto;"
+            let dom1 = clonedElement.querySelector(".detail-wrap")
+            debugger
+            if(dom1){
+              debugger
+              // designer-view
+              let dom2 = dom1.children[1];
+              dom2.style.height = "auto;"
+              dom2.querySelector(".d-cont").style.height = "auto;"
+
+            }
+
+            clonedElement.style.width = element.offsetWidth + 'px';
+
+            // 应用样式以展开内容
+            clonedElement.style.height = 'auto';
+            clonedElement.style.overflow = 'visible';
+            clonedElement.style.position = 'absolute';
+            // clonedElement.style.left = '-9999px';
+            clonedElement.style.left = '100px';
+            // document.body.appendChild(clonedElement);
+            // document.body.appendChild(constainter);
+
+            constainter.appendChild(clonedElement)
+
+
+            const canvas = await html2Canvas(clonedElement, {
+              scale: 2,
+              useCORS: true,
+              logging: false,
+              onclone: (clonedDoc) => {
+
+              }
+            });
+
+
+            // 移除克隆元素
+            // document.body.removeChild(constainter);
+            constainter.removeChild(clonedElement);
+
+  // 5. 生成PDF
+            this.currentStep = '创建PDF文档...';
+            this.progress = 70;
+
+            const imgData = canvas.toDataURL('image/jpeg', 0.95);
+            const pdf = new JsPDF('p', 'mm', 'a4');
+
+            const pageWidth = pdf.internal.pageSize.getWidth();
+            const pageHeight = pdf.internal.pageSize.getHeight();
+
+            // const imgWidth = canvas.width;
+            const imgWidth = element.offsetWidth;
+            const imgHeight = canvas.height;
+
+            const ratio = pageWidth / imgWidth;
+            const imgHeightOnPDF = imgHeight * ratio;
+
+            // 计算需要多少页
+            let totalPages = Math.ceil(imgHeightOnPDF / pageHeight);
+            let position = 0;
+
+            // 添加第一页
+            pdf.addImage(imgData, 'JPEG', 0, position, pageWidth, imgHeightOnPDF);
+
+            // 添加额外页面（如果需要）
+            for (let i = 1; i < totalPages; i++) {
+              position -= pageHeight;
+              pdf.addPage();
+              pdf.addImage(imgData, 'JPEG', 0, position, pageWidth, imgHeightOnPDF);
+            }
+
+            this.pdfPages = totalPages;
+
+            // 6. 生成预览
+            this.currentStep = '生成预览...';
+            this.progress = 90;
+
+            const pdfBlob = pdf.output('blob');
+            this.pdfPreviewUrl = URL.createObjectURL(pdfBlob);
+
+            // 7. 自动下载
+            pdf.save('exported-content.pdf');
+
+            this.progress = 100;
+            setTimeout(() => {
+              this.isExporting = false;
+            }, 500);
+
+        } catch (error) {
+            console.error('导出失败:', error);
+            // statusEl.textContent = '导出失败: ' + error.message;
+            // statusEl.style.background = '#ffebee';
+            // statusEl.style.color = '#c62828';
+        }
+    },
+    async exportPdf5() {
+      try {
+            // 获取要导出的元素
+            const element = this.$parent.$el;
+            // 计算内容总高度
+
+
+            // 克隆元素（不影响原始页面）
+            // statusEl.textContent = '克隆内容...';
+
+
+            const constainter = this.$parent.$parent.$el;
+            // 获取dom元素
+            // const dom = document.querySelector('#id名称')
+            if (element) {
+                html2Canvas(element).then(async canvas => {
+                    // A4纸，纵向
+                    let pdf = new JsPDF('p', 'mm', 'a4')
+                    let ctx = canvas.getContext('2d')
+                    let a4w = 190
+                    // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
+                    let a4h = 277
+                    // 按A4显示比例换算一页图像的像素高度
+                    let imgHeight = Math.floor((a4h * canvas.width) / a4w)
+                    let renderedHeight = 0
+                    while (renderedHeight < canvas.height) {
+                        let page = document.createElement('canvas')
+                        page.width = canvas.width
+                        // 可能内容不足一页
+                        page.height = Math.min(imgHeight, canvas.height - renderedHeight)
+                        // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
+                        page.getContext('2d').putImageData(
+                            ctx.getImageData(
+                                0,
+                                renderedHeight,
+                                canvas.width,
+                                Math.min(imgHeight, canvas.height - renderedHeight)
+                            ),
+                            0,
+                            0
+                        )
+                        // 添加图像到页面，保留10mm边距
+                        pdf.addImage(
+                            page.toDataURL('image/jpeg', 1.0),
+                            'JPEG',
+                            10,
+                            10,
+                            a4w,
+                            Math.min(a4h, (a4w * page.height) / page.width)
+                        )
+
+                        renderedHeight += imgHeight
+                        if (renderedHeight < canvas.height) {
+                            // 如果后面还有内容，添加一个空页
+                            pdf.addPage()
+                        }
+                        // delete page;
+                    }
+                    // 保存文件
+                    pdf.save('文档名称.pdf')
+                })
+            }
+        } catch (err) {
+            console.log(err)
+        }
     }
   }
 };

package/src/utils/pdfUtil.js

@@ -0,0 +1,71 @@
+import html2canvas from "html2canvas";
+import jspdf from "jspdf";
+export async function exportPDF(option) {
+  const dom = option.dom;
+  let fileName = option.fileName;
+  if (!dom) return
+  let height = "";
+  // 获取dom元素
+  let dom1 = dom.querySelector(".d-cont");
+  try {
+    if (dom1) {
+      height = dom1.style.height;
+      dom1.style.height = "auto";
+    }
+
+    if (dom) {
+      html2canvas(dom).then(async (canvas) => {
+        // A4纸，纵向
+        let pdf = new jspdf("p", "mm", "a4");
+        let ctx = canvas.getContext("2d");
+        let a4w = 190;
+        // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
+        let a4h = 277;
+        // 按A4显示比例换算一页图像的像素高度
+        let imgHeight = Math.floor((a4h * canvas.width) / a4w);
+        let renderedHeight = 0;
+        while (renderedHeight < canvas.height) {
+          let page = document.createElement("canvas");
+          page.width = canvas.width;
+          // 可能内容不足一页
+          page.height = Math.min(imgHeight, canvas.height - renderedHeight);
+          // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
+          page
+            .getContext("2d")
+            .putImageData(
+              ctx.getImageData(
+                0,
+                renderedHeight,
+                canvas.width,
+                Math.min(imgHeight, canvas.height - renderedHeight)
+              ),
+              0,
+              0
+            );
+          // 添加图像到页面，保留10mm边距
+          pdf.addImage(
+            page.toDataURL("image/jpeg", 1.0),
+            "JPEG",
+            10,
+            10,
+            a4w,
+            Math.min(a4h, (a4w * page.height) / page.width)
+          );
+
+          renderedHeight += imgHeight;
+          if (renderedHeight < canvas.height) {
+            // 如果后面还有内容，添加一个空页
+            pdf.addPage();
+          }
+          // delete page;
+        }
+        // 保存文件
+        pdf.save(`${fileName}.pdf`);
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  } finally {
+    if (dom1) dom1.style.height = height;
+  }
+}