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

View File

@ -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,30 +213,32 @@ 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(() => {
return v
.$confirm(tip, "", {
confirmButtonText: i18n.t("commons.confirm"),
cancelButtonText: i18n.t("commons.cancel"),
type: "warning",
center: false,
})
.then(() => {
if (success) {
success();
}
}).catch(() => {
})
.catch(() => {
if (cancel) {
cancel();
}
@ -219,13 +246,13 @@ export function operationConfirm(v, tip, success, 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,12 +275,12 @@ 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;
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,17 +358,16 @@ 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文件生成后的文件名字
@ -352,7 +379,8 @@ export function downloadPDF(ele, pdfName) {
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; // 获得滚动条宽度的一半
@ -361,7 +389,7 @@ export function downloadPDF(ele, pdfName) {
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;
@ -374,26 +402,27 @@ export function downloadPDF(ele, pdfName) {
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");
}
//可动态生成
});
}