準備做的系統(tǒng)中出現(xiàn)了 想導出當前頁面的png或者pdf設計數(shù)據(jù)較多后端做可能比較麻煩 就自己研究了一下

1、安裝html2canvas?、jspdf包

npm install --save html2canvas   // 可以將dom元素轉(zhuǎn)為一張圖片
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">需要截取的內(nèi)容區(qū)域我想測試導出是否可行</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'); // 創(chuàng)建一個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畫布內(nèi) 可以跨域請求外部鏈接圖片, 允許跨域請求。,// 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();}}}// 可動態(tài)生成pdf.save(`文件名.pdf`);});}
</script>