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

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)
+        }
     }
   }
 };