前台-vue3 html转pdf

步骤一：安装依赖包

npm i html2canvas
npm i jspdf

步骤二：在utils文件夹下新建htmlToPdf.ts文件

// 页面导出为pdf格式
import html2Canvas from 'html2canvas'
import jsPDF from 'jspdf'

const htmlToPdf = {
	getPdf(title, loading) {
		// loading = true;
		console.log(loading)
		html2Canvas(
			document.querySelector('#pdfDom') as HTMLElement,
			{
				allowTaint: false,
				taintTest: false,
				logging: false,
				useCORS: true,
				dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
				scale: 4, //按比例增加分辨率
			} as any
		).then((canvas) => {
			const pdf = new jsPDF('p', 'mm', 'a4') //A4纸，纵向
			const ctx: any = canvas.getContext('2d')
			const a4w = 190
			const a4h = 272 //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
			const imgHeight = Math.floor((a4h * canvas.width) / a4w)