'tj'

package.json

@@ -26,8 +26,11 @@
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
     "highlight.js": "^11.10.0",
+    "html2canvas": "^1.4.1",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.3.1",
+    "jspdf": "^2.5.1",
+    "jszip": "^3.10.1",
     "marked": "^14.0.0",
     "md-editor-v3": "^4.18.1",
     "nprogress": "0.2.0",

src/utils/pdf.js

@@ -0,0 +1,94 @@
+import html2Canvas from 'html2canvas'
+import JsPDF from 'jspdf'
+
+var noTableHeight = 0 //table外的元素高度
+
+export const htmlPdf = (title, html, fileList, type) => {
+  return new Promise((resolve, reject) => {
+    if (fileList) {
+      const pageHeight = Math.floor(277 * html.scrollWidth / 190) + 20 // 计算pdf高度
+      for (let i = 0; i < fileList.length; i++) { // 循环获取的元素
+        const multiple = Math.ceil((fileList[i].offsetTop + fileList[i].offsetHeight) / pageHeight) // 元素的高度
+        if (isSplit(fileList, i, multiple * pageHeight)) { // 计算是否超出一页
+          var _H = '' // 向pdf插入空白块的内容高度
+          if (fileList[i].localName !== 'tr') { // 判断是不是表格里的内容
+            _H = multiple * pageHeight - (fileList[i].offsetTop + fileList[i].offsetHeight)
+          } else {
+            _H = multiple * pageHeight - (fileList[i].offsetTop + fileList[i].offsetHeight + noTableHeight) + 20
+          }
+          var newNode = getFooterElement(_H)  // 向pdf插入空白块的内容
+          const divParent = fileList[i].parentNode // 获取该div的父节点
+          const next = fileList[i].nextSibling // 获取div的下一个兄弟节点
+          // 判断兄弟节点是否存在
+          if (next) {
+            // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
+            divParent.insertBefore(newNode, next)
+          } else {
+            // 否则向节点添加最后一个子节点
+            divParent.appendChild(newNode)
+          }
+        }
+      }
+    }
+
+    html2Canvas(html, {
+      allowTaint: false,
+      taintTest: false,
+      logging: false,
+      useCORS: true,
+      dpi: window.devicePixelRatio * 1,
+      scale: 1 // 按比例增加分辨率
+    }).then(canvas => {
+      var pdf = new JsPDF('l', 'mm', 'a4') // A4纸，横向或纵向
+      var ctx = canvas.getContext('2d')
+      var a4w = type ? 277 : 190; var a4h = type ? 190 : 277 // A4大小
+      var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
+      var renderedHeight = 0
+
+      while (renderedHeight < canvas.height) {
+        var 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)
+        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()// 如果后面还有内容，添加一个空页
+        }
+      }
+
+      // 返回Blob对象而不是直接下载文件
+      const pdfBlob = pdf.output('blob');
+      resolve(pdfBlob);
+    }).catch(error => {
+      reject(error);
+    });
+  });
+}
+
+// pdf截断需要一个空白位置来补充
+const getFooterElement = (remainingHeight, fillingHeight = 0) => {
+  const newNode = document.createElement('div')
+  newNode.style.background = '#ffffff'
+  newNode.style.width = 'calc(100% + 8px)'
+  newNode.style.marginLeft = '-4px'
+  newNode.style.marginBottom = '0px'
+  newNode.classList.add('divRemove')
+  newNode.style.height = (remainingHeight + fillingHeight) + 'px'
+  return newNode
+}
+
+const isSplit = (nodes, index, pageHeight) => {
+  if (nodes[index].localName !== 'tr') {  // 判断元素是不是tr
+    noTableHeight += nodes[index].clientHeight
+  }
+
+  if (nodes[index].localName !== 'tr') {
+    return nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
+  } else {
+    return nodes[index].offsetTop + nodes[index].offsetHeight + noTableHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight + noTableHeight > pageHeight
+  }
+}

src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue

@@ -110,7 +110,7 @@
               </el-table>
               <!-- <el-pagination style="margin-top:10px" background layout="prev, pager, next" :total="1000" /> -->
           </div>
-          <div style="margin-top:20px;gap:25px;display: flex;" v-show="showChart">
+          <div class="pdfRef" id="pdfRef" style="margin-top:20px;gap:25px;display: flex;" v-show="showChart">
             <!-- <img src="../../../assets/images/图1.png" alt=""> -->
             <div style="background:#FFFFFF;">
                 <div id="main" style="width: 500px;height: 500px;"></div>
@@ -194,8 +194,10 @@
   
   <script setup>
   import popModel from "@/views/components/popModal.vue";
+  import {htmlPdf} from "@/utils/pdf.js"
   import * as echarts from 'echarts';
   import * as XLSX from 'xlsx' 
+  import JSZip from 'jszip';
   import ecStat from 'echarts-stat';
   import * as API from '@/api/AI.js'
   import { getUserInfo } from "@/utils/auth";
@@ -486,7 +488,14 @@ const nowData=ref([])
     return;
   }
   const wb = XLSX.utils.table_to_book(tableDom);
-  XLSX.writeFile(wb, '聚类分析.xlsx');
+  // XLSX.writeFile(wb, '聚类分析.xlsx');
+  const zip = new JSZip();
+  const excelBlob = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
+  zip.file('聚类分析.xlsx', new Blob([excelBlob], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }));
+  zip.file('聚类分析图表.pdf', handleExport());
+  zip.generateAsync({ type: 'blob' }).then((content) => {
+    saveAs(content, '聚类分析.zip');
+  });
   }
 
   const startOver=()=>{
@@ -517,6 +526,13 @@ const nowData=ref([])
     tableLabel.length=0
     nowData.value=[]
   }
+//图表导出pdf
+const handleExport = async(name) => {
+	  var fileName= '聚类分析图表'
+	  const fileList = document.getElementsByClassName('pdfRef')   // 很重要
+	  const pdfBlob = await htmlPdf(fileName, document.querySelector('#pdfRef'), fileList,true)
+    return pdfBlob
+	}
   </script>
   
   <style lang="scss" scoped>

src/views/digitalMarketingAlgorithms/components/regressionAnalysis.vue

@@ -419,6 +419,7 @@
                 let data=res.data
                 data.slopes=data.slopes.join(',')
                 tableData3.value=[data]
+                predictionResults.value=''
             })
         }else{
             if(input5.value.length>1){
@@ -453,6 +454,7 @@
                     let data=res.data
                     data.slope=data.slope
                     tableData3.value=[data]
+                    predictionResults.value=''
                 })
         }
     }
@@ -482,7 +484,7 @@
             intercept:nowData.value.intercept,
             type:nowData.value.type,
             slope:nowData.value.slope,
-            slope:formInline2.user
+            lx:formInline2.user
         }
         API.logisticRegressionPrediction(sendData).then((res)=>{
             dialogVisible2.value=false