vue3实现导出pdf、png功能

准备做的系统中出现了 想导出当前页面的png或者pdf设计数据较多后端做可能比较麻烦 就自己研究了一下

1、安装html2canvas 、jspdf包

npm install --save html2canvas   // 可以将dom元素转为一张图片
npm install --save jspdf   // 导出为PDF格式

2、vue组件中引用，代码如下：

<template><div class="content"><a-button @click="exportPNG" size="small" type="primary">导出PNG</a-button><a-button @click="exportPDF" size="small" type="primary">导出PDF</a-button><div id="main-charts">需要截取的内容区域我想测试导出是否可行</div></div>
</template>

3、导出png

<script lang="ts" 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 lang="ts" 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>