style(接口测试): 修复到出报告样式显示问题

--bug=1018718 --user=赵勇 【接口测试】接口自动化导出报告内容显示不正确 https://www.tapd.cn/55049933/s/1275466

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() {

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
+}