vue3 页面导出为pdf

下载插件
“jspdf”: “^2.5.1”,
“html2canvas”: “^1.3.3”,
import * as html2canvas from ‘html2canvas’;
import * as jspdf from ‘jspdf’;

function downloadpdf() {
	element = document.getElementById('downLoadJspdf'); // 页面用div包裹起来要导出的内容 id设为downLoadJspdf
	html2canvas
		.default(element, {
			logging: false, //一开始canvas设置不渲染页面
		})
		.then((canvas: any) => {
			let pdf: any = new jspdf.default('p', 'mm', 'a4'); //纵向，单位mm，A4纸张大小
			let ctx: any = canvas.getContext('2d'); //预设2维画布
			let a4w: number = 190; //设置显示内容的大小，A4大小：210*297；最后显示在A4内部区域大小为：190*360
			let a4h: number = 260;
			let imgHeight: number = Math.floor((a4h * canvas.width) / a4w); //按A4显示比例换算一页图像的像素高度
			let renderedHeight: number = 0;
			console.log('进来了');
			while (renderedHeight < canvas.height) {
				//判断页面有内容时
				let page: any = document.createElement('canvas'); //创建画布
				page.width = canvas.width; //设置画布宽高等于内容宽高
				page.height = Math.min(imgHeight, canvas.height - renderedHeight); //画布的高等于内容的最小的高度（不足一页）
				//用getImageData裁剪指定区域，并绘制到前面创建的canvas对象中
				let a: any = page.getContext('2d');
				a.putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
				pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width)); //添加图片到页面，保留10mm边距

				renderedHeight += imgHeight;
				if (renderedHeight < canvas.height) {
					pdf.addPage();
				}
			}
			pdf.save('content.pdf');
		});
}