/* * @Author: 李佐宁 lizuoning@yuan-info.com * @Date: 2022-07-12 15:04:53 * @LastEditors: 曹文丽 caowenli@yuan-info.com * @LastEditTime: 2022-11-22 14:41:16 * @FilePath: \yuan-safety-manage-browser\src\utils\tools\index.ts * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE */ import html2canvas from "html2canvas"; import JsPDF from "jspdf"; export const LAYOUT = () => import("../../views/layout/index.vue"); // const path = require('path') // export {resolve} from 'path' // import.meta.glob(`../../views/**/*.vue`) const routeAllPathToCompMap = []; type menuItemType = { component: Function; name: String; path: String; children: menuItemType[]; parentPath: String; }; /** * @description: 将菜单转化路由 * @param {Array} oldMenu * @param {Array} newMenu * @return {Array} */ export const handleMenuToRoute = function ( oldMenu, newMenu: menuItemType[] = [], parentPath ) { oldMenu.forEach((item) => { let menuItem: menuItemType = { component: () => {}, name: "", path: "", parentPath: "", children: [], }; if (item.perType === 0) { if (!item.pid) { menuItem.component = LAYOUT; menuItem.parentPath = menuItem.path = item.path[0] === "/" ? item.path : "/" + item.path; } else { if (item.path[0] === "/") { item.path = item.path.slice(1); } menuItem.path = item.path; menuItem.parentPath = parentPath + "/" + menuItem.path; menuItem.component = routeAllPathToCompMap["../../views" + menuItem.parentPath + ".vue"]; } menuItem.name = item.label; if (item.children) { handleMenuToRoute( item.children, menuItem.children, menuItem.parentPath ); } newMenu.push(menuItem); } }); console.log(newMenu, "newMenu"); return newMenu; }; export const withInstall = (comp, name) => { comp.install = function (app) { console.log(app, "aoppppp"); app.component(name, comp); }; return comp; }; /** * @description: 获取数组索引 * @param {array} arr - 遍历数据 * @param {string} key - 键 * @param {string} value - 键值 * @return 返回索引 */ export const handleGetIndex = (arr, key, value) => { return arr.findIndex((item) => { return item[key] === value; }); }; /** * @param ele 要生成 pdf 的DOM元素(容器) * @param padfName PDF文件生成后的文件名字 * */ export const downloadPDF = (ele: any, pdfName: string): void => { const eleW: number = ele.offsetWidth; // 获得该容器的宽 const eleH: number = ele.offsetHeight; // 获得该容器的高 const eleOffsetTop: number = ele.offsetTop; // 获得该容器到文档顶部的距离 const eleOffsetLeft: number = ele.offsetLeft; // 获得该容器到文档最左的距离 const canvas = document.createElement("canvas"); let abs = 0; const win_in: number = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度(不包含滚动条) const win_out: number = window.innerWidth; // 获得当前窗口的宽度(包含滚动条) if (win_out > win_in) { // abs = (win_o - win_i)/2; // 获得滚动条长度的一半 abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半 // console.log(a, '新abs'); } canvas.width = eleW * 2; // 将画布宽&&高放大两倍 canvas.height = eleH * 2; const context: any = canvas.getContext("2d"); context.scale(2, 2); context.translate(-eleOffsetLeft - abs, -eleOffsetTop); // 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此 // translate的时候,要把这个差值去掉 // html2canvas(element).then( (canvas)=>{ //报错 // html2canvas(element[0]).then( (canvas)=>{ html2canvas(ele, { //dpi: 300, // allowTaint: true, //允许 canvas 污染, allowTaint参数要去掉,否则是无法通过toDataURL导出canvas数据的 useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。 }).then((canvas: any) => { const contentWidth: number = canvas.width; const contentHeight: number = canvas.height; //一页pdf显示html页面生成的canvas高度; const pageHeight: number = (contentWidth / 592.28) * 841.89; //未生成pdf的html页面高度 let leftHeight = contentHeight; //页面偏移 let position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 const imgWidth = 595.28; const imgHeight = (595.28 / contentWidth) * contentHeight; const pageData = canvas.toDataURL("image/jpeg", 1.0); const pdf = new JsPDF("portrait", "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(); } } } //可动态生成 pdf.save(pdfName); }); };