fix(接口测试): 修复场景报告到处后缀不带pdf的缺陷
--bug=1020579 --user=王孝刚 [接口测试] github#20205导出场景报告，格式为file，非pdf，手动改为.pdf后缀，可查看 https://www.tapd.cn/55049933/s/1311061
This commit is contained in:
wxg0103
fit2-zhao
parent
f8f386cf28
commit
ebf01d89b4
|
|
@ -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);
|
||||
})
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue