做平台网站,网站建设咨询公司地址,建筑工地施工现场视频,一个空间放多个网站准备做的系统中出现了 想导出当前页面的png或者pdf设计数据较多后端做可能比较麻烦 就自己研究了一下
1、安装html2canvas 、jspdf包
npm install --save html2canvas // 可以将dom元素转为一张图片
npm install --save jspdf // 导出为PDF格式
2、vue组件中引用#x…准备做的系统中出现了 想导出当前页面的png或者pdf设计数据较多后端做可能比较麻烦 就自己研究了一下
1、安装html2canvas 、jspdf包
npm install --save html2canvas // 可以将dom元素转为一张图片
npm install --save jspdf // 导出为PDF格式
2、vue组件中引用代码如下
templatediv classcontenta-button clickexportPNG sizesmall typeprimary导出PNG/a-buttona-button clickexportPDF sizesmall typeprimary导出PDF/a-buttondiv idmain-charts需要截取的内容区域我想测试导出是否可行/div/div
/template
3、导出png
script langts setup// 引入插件import html2canvas from html2canvas;import jsPDF from jspdf;// 导出pngconst exportPNG () {const ele: HTMLElement | null document.getElementById(main-charts);html2canvas(ele as HTMLElement).then((canvas: any) {const contentWidth canvas.width;const contentHeight canvas.height;const ctx: any canvas.getContext(2d);// 添加水印ctx.textAlign center;ctx.textBaseline middle;ctx.rotate((25 * Math.PI) / 180);ctx.font 20px Microsoft Yahei;ctx.fillStyle rgba(184, 184, 184, 0.8);for (let i contentWidth * -1; i contentWidth; i 240) {for (let j contentHeight * -1; j contentHeight; j 100) {// 填充文字x 间距, y 间距ctx.fillText(水印名, i, j);}}const imgUrl canvas.toDataURL(image/png);const tempLink document.createElement(a); // 创建一个a标签tempLink.style.display none;tempLink.href imgUrl;tempLink.setAttribute(download, 文件名); // 给a标签添加下载属性if (typeof tempLink.download undefined) {tempLink.setAttribute(target, _blank);}document.body.appendChild(tempLink); // 将a标签添加到body当中tempLink.click(); // 启动下载document.body.removeChild(tempLink); // 下载完毕删除a标签window.URL.revokeObjectURL(imgUrl);})}
/script
4、导出pdf
script langts setup// 引入插件import html2canvas from html2canvas;import jsPDF from jspdf;const exportPDF () {const ele: HTMLElement | null document.getElementById(main-charts);html2canvas(ele as HTMLElement, {dpi: 96, // 分辨率scale: 2, // 设置缩放useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。,// backgroundColor:#ffffff,这样背景还是黑的bgcolor: #ffffff, // 应该这样写logging: false, // 打印日志用的 可以不加默认为false}).then((canvas) {const contentWidth canvas.width;const contentHeight canvas.height;// 一页pdf显示html页面生成的canvas高度;const pageHeight (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 ctx: any canvas.getContext(2d);// 添加水印ctx.textAlign center;ctx.textBaseline middle;ctx.rotate((25 * Math.PI) / 180);ctx.font 20px Microsoft Yahei;ctx.fillStyle rgba(184, 184, 184, 0.8);for (let i contentWidth * -1; i contentWidth; i 240) {for (let j contentHeight * -1; j contentHeight; j 100) {// 填充文字x 间距, y 间距ctx.fillText(水印名, i, j);}}const pageData canvas.toDataURL(image/jpeg, 1.0);const pdf new jsPDF(, pt, a4);if (leftHeight pageHeight) {// 在pdf.addImage(pageData, JPEG, 左上宽度高度)设置在pdf中显示pdf.addImage(pageData, JPEG, 0, 0, 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(文件名.pdf);});}
/script
