diff --git a/project/pidu/app/AppSensitive/components/Detail.vue b/project/pidu/app/AppSensitive/components/Detail.vue
index 1a7a0e0b..ce6b3a5b 100644
--- a/project/pidu/app/AppSensitive/components/Detail.vue
+++ b/project/pidu/app/AppSensitive/components/Detail.vue
@@ -55,6 +55,13 @@
:disabled="msgList.length == 0">
导出
-->
+ 导出
@@ -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);
+ },
}
}
diff --git a/project/pidu/app/AppSessionArchive/components/Detail.vue b/project/pidu/app/AppSessionArchive/components/Detail.vue
index 6b265ed1..3d5e4ca7 100644
--- a/project/pidu/app/AppSessionArchive/components/Detail.vue
+++ b/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