VUE3_HTML转成pdf并导出

npm install jspdf --save

npm install --save html2canvas

在utils中创建htmlToPdf.ts文件

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

const htmlToPdf = {
	getPdf(title: string, id: any) {
		html2Canvas(document.querySelector(id), {
			allowTaint: false,
			logging: false,
			useCORS: true,
			scale: 4, //按比例增加分辨率// 提升画面质量，但是会增加文件大小
			// 需要注意，高度 宽度一定要在这里定义一下，不然会存在只下载了当前你能看到的页面!!!
			// height: document.getElementById('pdfDom').scrollHeight,
			// windowHeight: document.getElementById('pdfDom').scrollHeight,
			height: 2700,
			windowHeight: 2700
		}).then((canvas) => {
			const pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向
			const ctx = canvas.getContext('2d'),
				a4w = 210,
				a4h = 297, //A4大小，210mm x 297mm
				imgHeight = Math.floor((a4h * canvas.width) / a4w); //按A4显示比例换算一页图像的像素高度
			let renderedHeight = 0;

			while (renderedHeight < canvas.height) {
				const page = document.createElement('canvas');
				page.width = canvas.width;
				page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页

				//用getImageData剪裁指定区域，并画到前面创建的canvas对象中
				(page.getContext('2d') as any).putImageData(
					ctx?.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)),
					0,
					0
				);
				pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, a4w, Math.min(a4h, (a4w * page.height) / page.width)); //添加图像到页面，保留10mm边距

				renderedHeight += imgHeight;
				if (renderedHeight < canvas.height) {
					pdf.addPage(); //如果后面还有内容，添加一个空页
				}
				// delete page;
			}
			pdf.save(title + '.pdf');
		});
	}
};

export default htmlToPdf;

// 生成pdf
const exportPDF = async () => {
	proxy?.$modal.loading('正在下载pdf,请稍候...');
	await htmlToPdf.getPdf('对账单', '#pdfDom');
	proxy?.$modal.closeLoading();
};