当前位置：首页 > news >正文

vue3 实现将页面生成 pdf 导出（html2Canvas + jspdf）

news 2025/9/10 8:15:47

效果图：

需求：（报表页面等)导出为pdf

1、安装依赖

npm i html2canvas
npm i jspdf

2、在utils文件夹下新建html2pdf.ts文件

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf'export const htmlToPDF = async (htmlId: string, title: string = "标题", bgColor = "#fff") => {let pdfDom: HTMLElement | null = document.getElementById(htmlId) as HTMLElementpdfDom.style.padding = '0 10px !important'const A4Width = 595.28;const A4Height = 841.89;let canvas = await html2canvas(pdfDom, {scale: 2,useCORS: true,backgroundColor: bgColor,});let pageHeight = (canvas.width / A4Width) * A4Height;let leftHeight = canvas.height;let position = 0;let imgWidth = A4Width;let imgHeight = (A4Width / canvas.width) * canvas.height;/*根据自身业务需求  是否在此处键入下方水印代码*/let pageData = canvas.toDataURL("image/jpeg", 1.0);let PDF = new jsPDF("p", 'pt', 'a4');if (leftHeight < pageHeight) {PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);} else {while (leftHeight > 0) {PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);leftHeight -= pageHeight;position -= A4Height;if (leftHeight > 0) PDF.addPage();}}PDF.save(title + ".pdf");
}

如果你想给pdf加上水印，则添加下面这段代码：

const ctx: any = canvas.getContext('2d');
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.rotate((20 * Math.PI) / 180);
ctx.font = '20px Microsoft Yahei';
ctx.fillStyle = 'rgba(184, 184, 184, 0.8)';
for (let i = canvas.width * -1; i < canvas.width; i += 240) {for (let j = canvas.height * -1; j < canvas.height; j += 200) {// 填充文字，x 间距, y 间距ctx.fillText('水印名', i, j);}
}

3、在目标页面引入方法即可

<template><div id="test-id"><TestPinia></TestPinia></div><button @click="() => htmlToPDF('test-id', 'test pdf')">导出</button>
</template><script lang="ts">
import { defineComponent } from "vue";import TestPinia from "@/views/BarChart03/index.vue";
import { htmlToPDF } from "@/utils/pdf/html2pdf";export default defineComponent({name: "App",components: {TestPinia,},setup() {return {htmlToPDF,};},
});
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>