test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(接口测试): 修复场景报告到处后缀不带pdf的缺陷 

--bug=1020579 --user=王孝刚 [接口测试]
github#20205导出场景报告，格式为file，非pdf，手动改为.pdf后缀，可查看
https://www.tapd.cn/55049933/s/1311061
This commit is contained in:
wxg0103 2022-12-02 14:31:56 +08:00 committed by fit2-zhao
parent f8f386cf28
commit ebf01d89b4
1 changed files with 129 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
framework/sdk-parent/frontend/src/utils/index.js
View File

@ -1,66 +1,87 @@
import {COUNT_NUMBER, COUNT_NUMBER_SHALLOW, ORIGIN_COLOR, ORIGIN_COLOR_SHALLOW, PRIMARY_COLOR} from "./constants"; import {
import i18n from '../i18n' COUNT_NUMBER,
import html2canvas from 'html2canvas'; COUNT_NUMBER_SHALLOW,
import JsPDF from 'jspdf'; 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) { export function setCustomizeColor(color) {
// 自定义主题风格 // 自定义主题风格
document.body.style.setProperty('--aside_color', color || '#783887'); document.body.style.setProperty("--aside_color", color || "#783887");
document.body.style.setProperty('--font_color', "#fff"); document.body.style.setProperty("--font_color", "#fff");
document.body.style.setProperty('--font_light_color', "#fff"); document.body.style.setProperty("--font_light_color", "#fff");
} }
export function setDefaultTheme() { 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) { export function setColor(a, b, c, d, e) {
// 顶部菜单背景色 // 顶部菜单背景色
document.body.style.setProperty('--color', a); document.body.style.setProperty("--color", a);
document.body.style.setProperty('--color_shallow', b); document.body.style.setProperty("--color_shallow", b);
// 首页颜色 // 首页颜色
document.body.style.setProperty('--count_number', c); document.body.style.setProperty("--count_number", c);
document.body.style.setProperty('--count_number_shallow', d); 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() { export function setAsideColor() {
// 自定义主题风格 // 自定义主题风格
document.body.style.setProperty('--aside_color', "#783887"); document.body.style.setProperty("--aside_color", "#783887");
document.body.style.setProperty('--font_light_color', "#fff"); document.body.style.setProperty("--font_light_color", "#fff");
document.body.style.setProperty('--font_color', "#fff"); document.body.style.setProperty("--font_color", "#fff");
} }
export function setLightColor() { export function setLightColor() {
// 自定义主题风格 // 自定义主题风格
document.body.style.setProperty('--aside_color', "#fff"); document.body.style.setProperty("--aside_color", "#fff");
document.body.style.setProperty('--font_color', "#505266"); document.body.style.setProperty("--font_color", "#505266");
document.body.style.setProperty('--font_light_color', "#783887"); document.body.style.setProperty("--font_light_color", "#783887");
} }
export function getUUID() { export function getUUID() {
function S4() { function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); 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) { export function listenGoBack(callback) {
//监听浏览器返回操作，关闭该对话框 //监听浏览器返回操作，关闭该对话框
if (window.history && window.history.pushState) { if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL); history.pushState(null, null, document.URL);
window.addEventListener('popstate', callback); window.addEventListener("popstate", callback);
} }
} }
export function removeGoBackListener(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) { export function fullScreenLoading(component) {
return component.$loading({ return component.$loading({
lock: true, lock: true,
text: '资源切换中...', text: "资源切换中...",
spinner: 'el-icon-loading', spinner: "el-icon-loading",
background: 'rgba(218,218,218,0.6)', background: "rgba(218,218,218,0.6)",
customClass: 'ms-full-loading' customClass: "ms-full-loading",
}); });
} }
@ -92,7 +113,6 @@ export function stopFullScreenLoading(loading, timeout) {
}, timeout); }, timeout);
} }
export function strMapToObj(strMap) { export function strMapToObj(strMap) {
if (strMap) { if (strMap) {
let obj = Object.create(null); let obj = Object.create(null);
@ -117,7 +137,7 @@ export function downloadFile(name, content) {
if ("download" in document.createElement("a")) { if ("download" in document.createElement("a")) {
// 非IE下载 // 非IE下载
// chrome/firefox // chrome/firefox
let aTag = document.createElement('a'); let aTag = document.createElement("a");
aTag.download = name; aTag.download = name;
aTag.href = URL.createObjectURL(blob); aTag.href = URL.createObjectURL(blob);
aTag.click(); aTag.click();
@ -130,7 +150,7 @@ export function downloadFile(name, content) {
export function getTranslateOptions(data) { export function getTranslateOptions(data) {
let options = []; let options = [];
data.forEach(i => { data.forEach((i) => {
let option = {}; let option = {};
Object.assign(option, i); Object.assign(option, i);
option.text = i18n.t(option.text); option.text = i18n.t(option.text);
@ -140,14 +160,12 @@ export function getTranslateOptions(data) {
} }
export function exportPdf(name, canvasList) { export function exportPdf(name, canvasList) {
let pdf = new JsPDF("", "pt", "a4");
let pdf = new JsPDF('', 'pt', 'a4');
// 当前页面的当前高度 // 当前页面的当前高度
let currentHeight = 0; let currentHeight = 0;
for (let canvas of canvasList) { for (let canvas of canvasList) {
if (canvas) { if (canvas) {
let contentWidth = canvas.width; let contentWidth = canvas.width;
let contentHeight = canvas.height; let contentHeight = canvas.height;
@ -157,9 +175,9 @@ export function exportPdf(name, canvasList) {
// html页面生成的canvas在pdf中图片的宽高 // html页面生成的canvas在pdf中图片的宽高
let imgWidth = a4Width; 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; let leftHeight = imgHeight;
@ -177,7 +195,14 @@ export function exportPdf(name, canvasList) {
while (leftHeight > 0) { while (leftHeight > 0) {
// 本次添加占用的高度 // 本次添加占用的高度
let occupation = a4Height - currentHeight; let occupation = a4Height - currentHeight;
pdf.addImage(pageData, 'JPEG', 0, position + currentHeight, imgWidth, imgHeight); pdf.addImage(
pageData,
"JPEG",
0,
position + currentHeight,
imgWidth,
imgHeight
);
currentHeight = leftHeight; currentHeight = leftHeight;
leftHeight -= occupation; leftHeight -= occupation;
position -= occupation; position -= occupation;
@ -188,44 +213,46 @@ export function exportPdf(name, canvasList) {
} }
} }
} else { } else {
pdf.addImage(pageData, 'JPEG', 0, currentHeight, imgWidth, imgHeight); pdf.addImage(pageData, "JPEG", 0, currentHeight, imgWidth, imgHeight);
currentHeight += imgHeight; currentHeight += imgHeight;
} }
} }
} }
pdf.save(name.replace(" ", "_") + '.pdf'); pdf.save(name.replace(" ", "_") + ".pdf");
} }
export function operationConfirm(v, tip, success, cancel) { export function operationConfirm(v, tip, success, cancel) {
if (tip[tip.length - 1] !== '?' && tip[tip.length - 1] !== '？') { if (tip[tip.length - 1] !== "?" && tip[tip.length - 1] !== "？") {
tip += '?'; tip += "?";
} }
return v.$confirm(tip, '', { return v
confirmButtonText: i18n.t('commons.confirm'), .$confirm(tip, "", {
cancelButtonText: i18n.t('commons.cancel'), confirmButtonText: i18n.t("commons.confirm"),
type: 'warning', cancelButtonText: i18n.t("commons.cancel"),
center: false type: "warning",
}).then(() => { center: false,
if (success) { })
success(); .then(() => {
} if (success) {
}).catch(() => { success();
if (cancel) { }
cancel(); })
} .catch(() => {
}); if (cancel) {
cancel();
}
});
} }
export function parseTag(data) { export function parseTag(data) {
data.forEach(item => { data.forEach((item) => {
try { try {
let tags = JSON.parse(item.tags); let tags = JSON.parse(item.tags);
if (tags instanceof Array) { if (tags instanceof Array) {
item.tags = tags ? tags : []; item.tags = tags ? tags : [];
} else { } else {
item.tags = tags ? [tags + ''] : []; item.tags = tags ? [tags + ""] : [];
} }
} catch (e) { } catch (e) {
item.tags = []; item.tags = [];
@ -240,7 +267,7 @@ export function getNodePath(id, moduleOptions) {
return item.path; return item.path;
} }
} }
return ''; return "";
} }
export function windowPrint(id, zoom) { export function windowPrint(id, zoom) {
@ -248,13 +275,13 @@ export function windowPrint(id, zoom) {
let bdhtml = window.document.body.innerHTML; let bdhtml = window.document.body.innerHTML;
let el = document.getElementById(id); let el = document.getElementById(id);
var jubuData = el.innerHTML; var jubuData = el.innerHTML;
document.getElementsByTagName('body')[0].style.zoom = zoom; document.getElementsByTagName("body")[0].style.zoom = zoom;
//把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容 //把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容
window.document.body.innerHTML = jubuData; window.document.body.innerHTML = jubuData;
//调用打印功能 //调用打印功能
window.print(); window.print();
document.getElementsByTagName('body')[0].style.zoom = 1; document.getElementsByTagName("body")[0].style.zoom = 1;
window.document.body.innerHTML = bdhtml;//重新给页面内容赋值； window.document.body.innerHTML = bdhtml; //重新给页面内容赋值；
return false; return false;
} }
@ -269,24 +296,23 @@ export function handleCtrlSEvent(event, func) {
export function byteToSize(bytes) { export function byteToSize(bytes) {
if (bytes === 0) { if (bytes === 0) {
return '0 B'; return "0 B";
} }
let k = 1024, 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)); 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) { export function getTypeByFileName(filename) {
if (filename === '') { if (filename === "") {
return ''; return "";
} }
let type = filename.substr(filename.lastIndexOf('.') + 1); let type = filename.substr(filename.lastIndexOf(".") + 1);
return type.toUpperCase(); return type.toUpperCase();
} }
/** /**
* 同一行的多个文本框高度保持一致 * 同一行的多个文本框高度保持一致
* 同时支持 autosize 的功能 * 同时支持 autosize 的功能
@ -297,7 +323,9 @@ export function getTypeByFileName(filename) {
import calcTextareaHeight from "element-ui/packages/input/src/calcTextareaHeight"; import calcTextareaHeight from "element-ui/packages/input/src/calcTextareaHeight";
export function resizeTextarea(size = 2, index) { 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) { if (index || index === 0) {
_resizeTextarea(index * size, size, textareaList); _resizeTextarea(index * size, size, textareaList);
} else { } else {
@ -320,7 +348,7 @@ function _resizeTextarea(i, size, textareaList) {
for (let k = 0; k < size; k++) { for (let k = 0; k < size; k++) {
let cur = textareaList[i + k]; let cur = textareaList[i + k];
if (cur.clientHeight !== maxHeight) { 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) { export function getUrlParams(url) {
const arrSearch = url.split('?').pop().split('#').shift().split('&'); const arrSearch = url.split("?").pop().split("#").shift().split("&");
let obj = {}; let obj = {};
arrSearch.forEach((item) => { arrSearch.forEach((item) => {
const [k, v] = item.split('='); const [k, v] = item.split("=");
obj[k] = v; obj[k] = v;
return obj; return obj;
}); });
return obj; return obj;
} }
/** /**
* @param ele 要生成 pdf 的DOM元素（容器） * @param ele 要生成 pdf 的DOM元素（容器）
* @param pdfName PDF文件生成后的文件名字 * @param pdfName PDF文件生成后的文件名字
* */ * */
export function downloadPDF(ele, pdfName) { export function downloadPDF(ele, pdfName) {
let eleW = ele.offsetWidth;// 获得该容器的宽 let eleW = ele.offsetWidth; // 获得该容器的宽
let eleH = ele.offsetHeight;// 获得该容器的高 let eleH = ele.offsetHeight; // 获得该容器的高
let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离 let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离 let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
let canvas = document.createElement("canvas"); let canvas = document.createElement("canvas");
let abs = 0; 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; // 获得当前窗口的宽度（包含滚动条） let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
if (win_out > win_in) { 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; canvas.height = eleH * 2;
let context = canvas.getContext("2d"); 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; scale = scale > 3 ? 1 : 2;
context.translate(-eleOffsetLeft - abs, -eleOffsetTop); context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
let scrollWidth = document.getElementById("apiTestReport").scrollWidth; let scrollWidth = document.getElementById("apiTestReport").scrollWidth;
html2canvas(ele, { html2canvas(ele, {
scale: scale,// 背景灰色 scale: scale, // 背景灰色
background: "#FFFFFF", background: "#FFFFFF",
width: scrollWidth < 1500 ? 1500 : scrollWidth, // 为了使横向滚动条的内容全部展示 width: scrollWidth < 1500 ? 1500 : scrollWidth, // 为了使横向滚动条的内容全部展示
useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。 useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
}).then((canvas) => { }).then((canvas) => {
let contentWidth = canvas.width; let contentWidth = canvas.width;
let contentHeight = canvas.height; let contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度; //一页pdf显示html页面生成的canvas高度;
let pageHeight = contentWidth / 592.28 * 841.89; let pageHeight = (contentWidth / 592.28) * 841.89;
//未生成pdf的html页面高度 //未生成pdf的html页面高度
let leftHeight = contentHeight; let leftHeight = contentHeight;
//页面偏移 //页面偏移
let position = 0; let position = 0;
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28; 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 pageData = canvas.toDataURL("image/jpeg", 0.1);
let pdf = new JsPDF('', 'pt', 'a4'); let pdf = new JsPDF("", "pt", "a4");
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页 //当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) { if (leftHeight < pageHeight) {
//在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示； //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
} else { // 分页 } else {
// 分页
while (leftHeight > 0) { while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
leftHeight -= (pageHeight + 841.89); leftHeight -= pageHeight + 841.89;
position -= 841.89; position -= 841.89;
//避免添加空白页 //避免添加空白页
if (leftHeight > 0) { 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); });
})
} }