导出

project/pidu/app/AppSensitive/components/Detail.vue

@@ -55,6 +55,13 @@
                        :disabled="msgList.length == 0">
             <el-button icon="iconfont iconExported" :disabled="msgList.length == 0">导出</el-button>
           </ai-download> -->
+          <el-button
+            icon="iconfont iconExported"
+            :disabled="msgList.length == 0"
+            style="margin-left: 8px"
+            @click="handleExport"
+            >导出</el-button
+          >
         </div>
       </div>
       <div class="content-right-info" @scroll='msgScroll'>
@@ -163,7 +170,156 @@
   import AMapLoader from '@amap/amap-jsapi-loader'
   import Vue from 'vue'
   Vue.use(Viewer);
+
+  import html2canvas from "../../AppSessionArchive/html2canvas/dist/html2canvas.esm.js";
+ import jsPDF from "../../AppSessionArchive/jspdf.es.min.js";
+
+  import { Loading } from "element-ui";
   
+  const PdfLoader = (ele, pdfFileName) => {
+    let loadingInstance = Loading.service({ fullscreen: true });
+    ele.style.fontFamily = "宋体";
+    ele.style.padding = "0 20px";
+    // 预留一定的时间给dom页面渲染完成 （如果你能保证dom已经渲染完成了包括图片 才去进行下面转化操作那就可以不用这个延迟器）
+    setTimeout(() => {
+      html2canvas(ele, {
+        // dpi: 300, // 清晰度
+        scale: 1, // 将Canvas放大倍数 可以获得更具清晰的图片内容
+        // ！！！注意如果你生成的元素内容非常多是一个非常长列表 建议scale不要写太高或者删除这个属性 ，因为html2canvas会吧内容转成
+        // base64 会有一定的内容上限 最终返回没有base64编码（目前我尝试过生成55页的PDF，估计上限在70-100页）
+        useCORS: true, //是否允许跨域
+        allowTaint: false,
+        height: ele.offsetHeight,
+        width: ele.offsetWidth,
+        windowWidth: document.body.scrollWidth,
+        windowHeight: document.body.scrollHeight,
+      }).then((canvas) => {
+        //未生成pdf的html页面高度
+        var leftHeight = canvas.height;
+        var a4Width = 595.28;
+        var a4Height = 841.89;
+        //一页pdf显示html页面生成的canvas高度;
+        var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height);
+        //pdf页面偏移
+        var position = 0;
+        var pageData = canvas.toDataURL("image/jpeg", 1.0); // 生成的base64 如果你只是要图片 到这里就可以拿到base64图片编码（可以查一下base64转二进制 使用new FormData对象传给后端到服务器）
+
+        var pdf = new jsPDF("x", "pt", "a4"); //生成A4内容大小的pdf每页 更多参数配置可以看看下面的网站
+        // https://blog.csdn.net/weixin_42333548/article/details/107630706
+        var index = 1,
+          canvas1 = document.createElement("canvas"),
+          height;
+        pdf.setDisplayMode("fullwidth", "continuous", "FullScreen");
+        // 处理 pdf 上一页 与 下一页内容之间交叉不好看的断点样式
+        // 并且把内容转成二进制 生成pdf文件
+        function createImpl(canvas) {
+          if (leftHeight > 0) {
+            index++;
+            var checkCount = 0;
+            if (leftHeight > a4HeightRef) {
+              var i = position + a4HeightRef;
+              for (i = position + a4HeightRef; i >= position; i--) {
+                var isWrite = true;
+                for (var j = 0; j < canvas.width; j++) {
+                  var c = canvas.getContext("2d").getImageData(j, i, 1, 1).data;
+                  if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
+                    isWrite = false;
+                    break;
+                  }
+                }
+                if (isWrite) {
+                  checkCount++;
+                  if (checkCount >= 10) {
+                    break;
+                  }
+                } else {
+                  checkCount = 0;
+                }
+              }
+              height =
+                Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
+              if (height <= 0) {
+                height = a4HeightRef;
+              }
+            } else {
+              height = leftHeight;
+            }
+
+            canvas1.width = canvas.width;
+            canvas1.height = height;
+            var ctx = canvas1.getContext("2d");
+            ctx.drawImage(
+              canvas,
+              0,
+              position,
+              canvas.width,
+              height,
+              0,
+              0,
+              canvas.width,
+              height
+            );
+
+            if (position != 0) {
+              pdf.addPage();
+            }
+            pdf.addImage(
+              canvas1.toDataURL("image/jpeg", 1.0),
+              "JPEG",
+              0,
+              0,
+              a4Width,
+              (a4Width / canvas1.width) * height
+            );
+            leftHeight -= height;
+            position += height;
+            if (leftHeight > 0) {
+              //给pdf文件 添加全屏水印
+              // const base64 = '';  // 吧你要添加的水印内容搞成一张小图片 然后手动去转成base64编码 放在这里就可以了
+              // for (let i = 0; i < 6; i++) {
+              //     for (let j = 0; j < 5; j++) {
+              //         const left = (j * 120) + 20;
+              //         pdf.addImage(base64, 'JPEG', left, i * 150, 20, 30);
+              //     };
+              // };
+              pdf.addImage(pageData, "JPEG", 0, i * 150, 20, 30);
+              setTimeout(createImpl, 500, canvas);
+            } else {
+              pdfSave();
+            }
+          }
+        }
+
+        //当内容未超过pdf一页显示的范围，无需分页
+        if (leftHeight < a4HeightRef) {
+          pdf.addImage(
+            pageData,
+            "JPEG",
+            0,
+            0,
+            a4Width,
+            (a4Width / canvas.width) * leftHeight
+          );
+
+          pdfSave();
+        } else {
+          try {
+            pdf.deletePage(0);
+            setTimeout(createImpl, 500, canvas);
+          } catch (err) {
+            console.log(err);
+          }
+        }
+
+        function pdfSave() {
+          // pdf文件生成完毕 自动下载到客户本地
+          pdf.save(pdfFileName + ".pdf");
+          loadingInstance.close();
+        }
+      });
+    }, 500);
+  };
+
   export default {
     name: 'Detail',
     props: {
@@ -456,7 +612,14 @@
           type: 'List',
           isRefresh: true
         })
-      }
+      },
+      handleExport() {
+        var fileName =
+          this.tabIndex == 1
+            ? this.list[this.leftActiveIndex].roomName
+            : this.list[this.leftActiveIndex].toUserName;
+        PdfLoader(this.$refs.pdf, fileName);
+      },
     }
   }
 </script>

project/pidu/app/AppSessionArchive/components/Detail.vue

@@ -293,7 +293,7 @@ import Vue from "vue";
 Vue.use(Viewer);
 
 import html2canvas from "../html2canvas/dist/html2canvas.esm.js";
-import jsPDF from "../jspdf";
+import jsPDF from "../jspdf/dist/jspdf.es.min.js";
 
 import { Loading } from "element-ui";
 
@@ -668,7 +668,6 @@ export default {
       window.open(row.linkUrl, "new");
     },
     handleExport() {
-      this.loading = true;
       var fileName =
         this.tabIndex == 1
           ? this.list[this.leftActiveIndex].roomName