From efc43f2f3a263e9e398050eea068f09022c226ef Mon Sep 17 00:00:00 2001 From: wxg0103 <727495428@qq.com> Date: Fri, 2 Dec 2022 14:31:56 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9C=BA=E6=99=AF=E6=8A=A5=E5=91=8A=E5=88=B0?= =?UTF-8?q?=E5=A4=84=E5=90=8E=E7=BC=80=E4=B8=8D=E5=B8=A6pdf=E7=9A=84?= =?UTF-8?q?=E7=BC=BA=E9=99=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --bug=1020579 --user=王孝刚 [接口测试] github#20205导出场景报告，格式为file，非pdf，手动改为.pdf后缀，可查看 https://www.tapd.cn/55049933/s/1311061 --- .../sdk-parent/frontend/src/utils/index.js | 224 ++++++++++-------- 1 file changed, 129 insertions(+), 95 deletions(-) diff --git a/framework/sdk-parent/frontend/src/utils/index.js b/framework/sdk-parent/frontend/src/utils/index.js index 79d9c4f31f..f1ec97426d 100644 --- a/framework/sdk-parent/frontend/src/utils/index.js +++ b/framework/sdk-parent/frontend/src/utils/index.js @@ -1,66 +1,87 @@ -import {COUNT_NUMBER, COUNT_NUMBER_SHALLOW, ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, PRIMARY_COLOR} from "./constants"; -import i18n from '../i18n' -import html2canvas from 'html2canvas'; -import JsPDF from 'jspdf'; - +import { + COUNT_NUMBER, + COUNT_NUMBER_SHALLOW, + ORIGIN_COLOR, + ORIGIN_COLOR_SHALLOW, + PRIMARY_COLOR, +} from "./constants"; +import i18n from "../i18n"; +import html2canvas from "html2canvas"; +import JsPDF from "jspdf"; export function setCustomizeColor(color) { // 自定义主题风格 - document.body.style.setProperty('--aside_color', color || '#783887'); - document.body.style.setProperty('--font_color', "#fff"); - document.body.style.setProperty('--font_light_color', "#fff"); + document.body.style.setProperty("--aside_color", color || "#783887"); + document.body.style.setProperty("--font_color", "#fff"); + document.body.style.setProperty("--font_light_color", "#fff"); } export function setDefaultTheme() { - setColor(ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, COUNT_NUMBER, COUNT_NUMBER_SHALLOW, PRIMARY_COLOR); + setColor( + ORIGIN_COLOR, + ORIGIN_COLOR_SHALLOW, + COUNT_NUMBER, + COUNT_NUMBER_SHALLOW, + PRIMARY_COLOR + ); } - export function setColor(a, b, c, d, e) { // 顶部菜单背景色 - document.body.style.setProperty('--color', a); - document.body.style.setProperty('--color_shallow', b); + document.body.style.setProperty("--color", a); + document.body.style.setProperty("--color_shallow", b); // 首页颜色 - document.body.style.setProperty('--count_number', c); - document.body.style.setProperty('--count_number_shallow', d); + document.body.style.setProperty("--count_number", c); + document.body.style.setProperty("--count_number_shallow", d); // 主颜色 - document.body.style.setProperty('--primary_color', e); + document.body.style.setProperty("--primary_color", e); } - export function setAsideColor() { // 自定义主题风格 - document.body.style.setProperty('--aside_color', "#783887"); - document.body.style.setProperty('--font_light_color', "#fff"); - document.body.style.setProperty('--font_color', "#fff"); + document.body.style.setProperty("--aside_color", "#783887"); + document.body.style.setProperty("--font_light_color", "#fff"); + document.body.style.setProperty("--font_color", "#fff"); } export function setLightColor() { // 自定义主题风格 - document.body.style.setProperty('--aside_color', "#fff"); - document.body.style.setProperty('--font_color', "#505266"); - document.body.style.setProperty('--font_light_color', "#783887"); + document.body.style.setProperty("--aside_color", "#fff"); + document.body.style.setProperty("--font_color", "#505266"); + document.body.style.setProperty("--font_light_color", "#783887"); } - export function getUUID() { function S4() { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); } - return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4()); + return ( + S4() + + S4() + + "-" + + S4() + + "-" + + S4() + + "-" + + S4() + + "-" + + S4() + + S4() + + S4() + ); } export function listenGoBack(callback) { //监听浏览器返回操作，关闭该对话框 if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); - window.addEventListener('popstate', callback); + window.addEventListener("popstate", callback); } } export function removeGoBackListener(callback) { - window.removeEventListener('popstate', callback); + window.removeEventListener("popstate", callback); } // 驼峰转换下划线 @@ -78,10 +99,10 @@ export function lineToHump(name) { export function fullScreenLoading(component) { return component.$loading({ lock: true, - text: '资源切换中...', - spinner: 'el-icon-loading', - background: 'rgba(218,218,218,0.6)', - customClass: 'ms-full-loading' + text: "资源切换中...", + spinner: "el-icon-loading", + background: "rgba(218,218,218,0.6)", + customClass: "ms-full-loading", }); } @@ -92,7 +113,6 @@ export function stopFullScreenLoading(loading, timeout) { }, timeout); } - export function strMapToObj(strMap) { if (strMap) { let obj = Object.create(null); @@ -117,7 +137,7 @@ export function downloadFile(name, content) { if ("download" in document.createElement("a")) { // 非IE下载 // chrome/firefox - let aTag = document.createElement('a'); + let aTag = document.createElement("a"); aTag.download = name; aTag.href = URL.createObjectURL(blob); aTag.click(); @@ -130,7 +150,7 @@ export function downloadFile(name, content) { export function getTranslateOptions(data) { let options = []; - data.forEach(i => { + data.forEach((i) => { let option = {}; Object.assign(option, i); option.text = i18n.t(option.text); @@ -140,14 +160,12 @@ export function getTranslateOptions(data) { } export function exportPdf(name, canvasList) { - - let pdf = new JsPDF('', 'pt', 'a4'); + let pdf = new JsPDF("", "pt", "a4"); // 当前页面的当前高度 let currentHeight = 0; for (let canvas of canvasList) { if (canvas) { - let contentWidth = canvas.width; let contentHeight = canvas.height; @@ -157,9 +175,9 @@ export function exportPdf(name, canvasList) { // html页面生成的canvas在pdf中图片的宽高 let imgWidth = a4Width; - let imgHeight = a4Width / contentWidth * contentHeight; + let imgHeight = (a4Width / contentWidth) * contentHeight; - let pageData = canvas.toDataURL('image/jpeg', 1.0); + let pageData = canvas.toDataURL("image/jpeg", 1.0); // 当前图片的剩余高度 let leftHeight = imgHeight; @@ -177,7 +195,14 @@ export function exportPdf(name, canvasList) { while (leftHeight > 0) { // 本次添加占用的高度 let occupation = a4Height - currentHeight; - pdf.addImage(pageData, 'JPEG', 0, position + currentHeight, imgWidth, imgHeight); + pdf.addImage( + pageData, + "JPEG", + 0, + position + currentHeight, + imgWidth, + imgHeight + ); currentHeight = leftHeight; leftHeight -= occupation; position -= occupation; @@ -188,44 +213,46 @@ export function exportPdf(name, canvasList) { } } } else { - pdf.addImage(pageData, 'JPEG', 0, currentHeight, imgWidth, imgHeight); + pdf.addImage(pageData, "JPEG", 0, currentHeight, imgWidth, imgHeight); currentHeight += imgHeight; } } } - pdf.save(name.replace(" ", "_") + '.pdf'); - + pdf.save(name.replace(" ", "_") + ".pdf"); } export function operationConfirm(v, tip, success, cancel) { - if (tip[tip.length - 1] !== '?' && tip[tip.length - 1] !== '？') { - tip += '?'; + if (tip[tip.length - 1] !== "?" && tip[tip.length - 1] !== "？") { + tip += "?"; } - return v.$confirm(tip, '', { - confirmButtonText: i18n.t('commons.confirm'), - cancelButtonText: i18n.t('commons.cancel'), - type: 'warning', - center: false - }).then(() => { - if (success) { - success(); - } - }).catch(() => { - if (cancel) { - cancel(); - } - }); + return v + .$confirm(tip, "", { + confirmButtonText: i18n.t("commons.confirm"), + cancelButtonText: i18n.t("commons.cancel"), + type: "warning", + center: false, + }) + .then(() => { + if (success) { + success(); + } + }) + .catch(() => { + if (cancel) { + cancel(); + } + }); } export function parseTag(data) { - data.forEach(item => { + data.forEach((item) => { try { let tags = JSON.parse(item.tags); if (tags instanceof Array) { item.tags = tags ? tags : []; } else { - item.tags = tags ? [tags + ''] : []; + item.tags = tags ? [tags + ""] : []; } } catch (e) { item.tags = []; @@ -240,7 +267,7 @@ export function getNodePath(id, moduleOptions) { return item.path; } } - return ''; + return ""; } export function windowPrint(id, zoom) { @@ -248,13 +275,13 @@ export function windowPrint(id, zoom) { let bdhtml = window.document.body.innerHTML; let el = document.getElementById(id); var jubuData = el.innerHTML; - document.getElementsByTagName('body')[0].style.zoom = zoom; + document.getElementsByTagName("body")[0].style.zoom = zoom; //把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容 window.document.body.innerHTML = jubuData; //调用打印功能 window.print(); - document.getElementsByTagName('body')[0].style.zoom = 1; - window.document.body.innerHTML = bdhtml;//重新给页面内容赋值； + document.getElementsByTagName("body")[0].style.zoom = 1; + window.document.body.innerHTML = bdhtml; //重新给页面内容赋值； return false; } @@ -269,24 +296,23 @@ export function handleCtrlSEvent(event, func) { export function byteToSize(bytes) { if (bytes === 0) { - return '0 B'; + return "0 B"; } let k = 1024, - sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], + sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], i = Math.floor(Math.log(bytes) / Math.log(k)); - return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; + return (bytes / Math.pow(k, i)).toPrecision(3) + " " + sizes[i]; } export function getTypeByFileName(filename) { - if (filename === '') { - return ''; + if (filename === "") { + return ""; } - let type = filename.substr(filename.lastIndexOf('.') + 1); + let type = filename.substr(filename.lastIndexOf(".") + 1); return type.toUpperCase(); } - /** * 同一行的多个文本框高度保持一致 * 同时支持 autosize 的功能 @@ -297,7 +323,9 @@ export function getTypeByFileName(filename) { import calcTextareaHeight from "element-ui/packages/input/src/calcTextareaHeight"; export function resizeTextarea(size = 2, index) { - let textareaList = document.querySelectorAll('.sync-textarea .el-textarea__inner'); + let textareaList = document.querySelectorAll( + ".sync-textarea .el-textarea__inner" + ); if (index || index === 0) { _resizeTextarea(index * size, size, textareaList); } else { @@ -320,7 +348,7 @@ function _resizeTextarea(i, size, textareaList) { for (let k = 0; k < size; k++) { let cur = textareaList[i + k]; if (cur.clientHeight !== maxHeight) { - cur.style.height = maxHeight + 'px'; + cur.style.height = maxHeight + "px"; } } } @@ -330,70 +358,71 @@ export function checkMicroMode() { } export function getUrlParams(url) { - const arrSearch = url.split('?').pop().split('#').shift().split('&'); + const arrSearch = url.split("?").pop().split("#").shift().split("&"); let obj = {}; arrSearch.forEach((item) => { - const [k, v] = item.split('='); + const [k, v] = item.split("="); obj[k] = v; return obj; }); return obj; } - /** * @param ele 要生成 pdf 的DOM元素（容器） * @param pdfName PDF文件生成后的文件名字 * */ export function downloadPDF(ele, pdfName) { - let eleW = ele.offsetWidth;// 获得该容器的宽 - let eleH = ele.offsetHeight;// 获得该容器的高 - let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离 + 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_in = + document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条） let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条） if (win_out > win_in) { - abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半 + abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半 } - canvas.width = eleW * 2; // 将画布宽&&高放大两倍 + canvas.width = eleW * 2; // 将画布宽&&高放大两倍 canvas.height = eleH * 2; let context = canvas.getContext("2d"); - let scale = canvas.height / (canvas.width / 592.28 * 841.89); + let scale = canvas.height / ((canvas.width / 592.28) * 841.89); scale = scale > 3 ? 1 : 2; context.translate(-eleOffsetLeft - abs, -eleOffsetTop); let scrollWidth = document.getElementById("apiTestReport").scrollWidth; html2canvas(ele, { - scale: scale,// 背景灰色 + scale: scale, // 背景灰色 background: "#FFFFFF", width: scrollWidth < 1500 ? 1500 : scrollWidth, // 为了使横向滚动条的内容全部展示 - useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。 + useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。 }).then((canvas) => { let contentWidth = canvas.width; let contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; - let pageHeight = contentWidth / 592.28 * 841.89; + 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 imgHeight = (595.28 / contentWidth) * contentHeight; - let pageData = canvas.toDataURL('image/jpeg', 0.1); - let pdf = new JsPDF('', 'pt', 'a4'); + let pageData = canvas.toDataURL("image/jpeg", 0.1); + 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); - } else { // 分页 + pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight); + } else { + // 分页 while (leftHeight > 0) { - pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); - leftHeight -= (pageHeight + 841.89); + pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); + leftHeight -= pageHeight + 841.89; position -= 841.89; //避免添加空白页 if (leftHeight > 0) { @@ -401,7 +430,12 @@ export function downloadPDF(ele, pdfName) { } } } + // 判断文件名是否以.pdf文件 + if (decodeURIComponent(pdfName).endsWith(".pdf")) { + pdf.save(pdfName); + } else { + pdf.save(decodeURIComponent(pdfName) + ".pdf"); + } //可动态生成 - pdf.save(pdfName); - }) + }); }