diff --git a/package.json b/package.json index 0215154..abe4f9a 100644 --- a/package.json +++ b/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", diff --git a/src/assets/images/f1005.png b/src/assets/images/f1005.png index c864b68..b7dabc8 100644 Binary files a/src/assets/images/f1005.png and b/src/assets/images/f1005.png differ diff --git a/src/utils/pdf.js b/src/utils/pdf.js new file mode 100644 index 0000000..1d57532 --- /dev/null +++ b/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 + } +} diff --git a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue index 505c4b6..e87c6b9 100644 --- a/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue +++ b/src/views/digitalMarketingAlgorithms/components/clusterAnalysis.vue @@ -110,7 +110,7 @@ -
+
@@ -194,8 +194,10 @@