diff --git a/api-test/frontend/src/business/automation/report/ApiReportDetail.vue b/api-test/frontend/src/business/automation/report/ApiReportDetail.vue index f1cc482633..3135201cd6 100644 --- a/api-test/frontend/src/business/automation/report/ApiReportDetail.vue +++ b/api-test/frontend/src/business/automation/report/ApiReportDetail.vue @@ -119,7 +119,7 @@ import MsApiReportExport from "./ApiReportExport"; import MsApiReportViewHeader from "./ApiReportViewHeader"; import {RequestFactory} from "../../definition/model/ApiTestModel"; import {getCurrentProjectID} from "metersphere-frontend/src/utils/token"; -import {exportPdf, getUUID} from "metersphere-frontend/src/utils"; +import {downloadPDF, getUUID} from "metersphere-frontend/src/utils"; import {hasLicense} from "metersphere-frontend/src/utils/permission"; import { getScenarioReport, @@ -129,7 +129,6 @@ import { } from "../../../api/scenario-report"; import {STEP} from "../../automation/scenario/Setting"; import MsCodeEdit from "metersphere-frontend/src/components/MsCodeEdit"; -import html2canvas from "html2canvas"; export default { name: "MsApiReport", @@ -691,12 +690,9 @@ export default { let name = this.report.name; this.$nextTick(() => { setTimeout(() => { - let promise = html2canvas(document.getElementById("apiTestReport"), {scale: 2}); - Promise.all([promise]).then(function (canvas) { - exportPdf(name || "scenario-report", canvas); - reset(); - }); - }, 1000); + downloadPDF(document.getElementById("apiTestReport"), name || "scenario-report"); + reset(); + }, 5000); }); }, handleSave() { diff --git a/framework/sdk-parent/frontend/src/utils/index.js b/framework/sdk-parent/frontend/src/utils/index.js index 96368943bc..2cb1fe02dc 100644 --- a/framework/sdk-parent/frontend/src/utils/index.js +++ b/framework/sdk-parent/frontend/src/utils/index.js @@ -1,7 +1,8 @@ import {COUNT_NUMBER, COUNT_NUMBER_SHALLOW, ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, PRIMARY_COLOR} from "./constants"; import i18n from '../i18n' -import {jsPDF} from "jspdf"; import {MessageBox} from "element-ui"; +import html2canvas from 'html2canvas'; +import JsPDF from 'jspdf'; export function setCustomizeColor(color) { @@ -141,7 +142,7 @@ export function getTranslateOptions(data) { export function exportPdf(name, canvasList) { - let pdf = new jsPDF('', 'pt', 'a4'); + let pdf = new JsPDF('', 'pt', 'a4'); // 当前页面的当前高度 let currentHeight = 0; @@ -339,3 +340,110 @@ export function getUrlParams(url) { }); return obj; } + + +/** + * @param ele 要生成 pdf 的DOM元素（容器） + * @param padfName PDF文件生成后的文件名字 + * */ +export function downloadPDF(ele, pdfName) { + let eleW = ele.offsetWidth;// 获得该容器的宽 + let eleH = ele.offsetHeight;// 获得该容器的高 + let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离 + let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离 + let canvas = document.createElement("canvas"); + let abs = 0; + let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条） + let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条） + if (win_out > win_in) { + abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半 + } + + canvas.width = eleW * 2; // 将画布宽&&高放大两倍 + canvas.height = eleH * 2; + let context = canvas.getContext("2d"); + context.scale(2, 2); + context.translate(-eleOffsetLeft - abs, -eleOffsetTop); + // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此 + // translate的时候，要把这个差值去掉 + + // 解决分页内容被切割问题 + let pageHeightNum = canvas.width / 2 / 592.28 * 841.89 + let lists = document.getElementsByClassName('target-node-item') + for (let i = 0; i < lists.length; i++) { + let multiple = Math.ceil((lists[i].offsetTop + lists[i].offsetHeight) / pageHeightNum) + if (isSplit(lists, i, multiple * pageHeightNum)) { + let divParent = lists[i].parentNode // 获取该div的父节点 + let newNode = document.createElement('div') + newNode.className = 'ms-export-div' + newNode.style.background = '#ffffff' + let _H = multiple * pageHeightNum - (lists[i].offsetTop + lists[i].offsetHeight) + newNode.style.height = _H + 50 + 'px' + let next = lists[i].nextSibling // 获取div的下一个兄弟节点 + // 判断兄弟节点是否存在 + if (next) { + // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后 + divParent.insertBefore(newNode, next) + } else { + // 不存在则直接添加到最后,appendChild默认添加到divParent的最后 + divParent.appendChild(newNode) + } + } + } + + html2canvas(ele, { + dpi: 300, + // allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的 + useCORS: true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。 + }).then((canvas) => { + let contentWidth = canvas.width; + let contentHeight = canvas.height; + //一页pdf显示html页面生成的canvas高度; + let pageHeight = contentWidth / 592.28 * 841.89; + //未生成pdf的html页面高度 + let leftHeight = contentHeight; + //页面偏移 + let position = 0; + //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 + let imgWidth = 595.28; + let imgHeight = 595.28 / contentWidth * contentHeight; + + let pageData = canvas.toDataURL('image/jpeg', 1.0); + + let pdf = new JsPDF('', 'pt', 'a4'); + //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) + //当内容未超过pdf一页显示的范围，无需分页 + if (leftHeight < pageHeight) { + //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示； + pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); + // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight); + } else { // 分页 + while (leftHeight > 0) { + pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); + leftHeight -= pageHeight; + position -= 841.89; + //避免添加空白页 + if (leftHeight > 0) { + pdf.addPage(); + } + } + } + + let delArr = document.getElementsByClassName('ms-export-div') + for (let i = delArr.length - 1; i >= 0; i--) { + if (delArr[i] && delArr[i].parentElement) { + delArr[i].remove(); + } + } + + //可动态生成 + pdf.save(pdfName); + }) +} + +export function isSplit(nodes, index, pageHeight) { + if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight) { + return true + } + return false +}