html2canvas+JsPDF实现单或多图片导出PDF

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';

/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  padfName     PDF文件生成后的文件名字
 * @width  pdfW					pdf文件夹大小
 * @height pdfH					pdf文件大小
 * */

const downloadPDF = async (ele, pdfName, pdfW, pdfH) => {
	let eles = Array.isArray(ele) ? ele : [ele];
	console.log( pdfW, pdfH);
	let eleW = ele.offsetWidth; // 获得该容器的宽
	let eleH = ele.offsetHeight; // 获得该容器的高
  
  // 创建jspdf
  let pdf = new JsPDF( {
		orientation: 'p',
		unit: 'mm',
		format: [pdfW, pdfH],
	});

	// html2canvas配置
	const style = {
		taintTest: false,
		dpi: 300, 							// 将分辨率提高到特定的DPI 提高四倍
		allowTaint: true, 			// 允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
		useCORS: true, 					// 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
		backgroundColor: null, 	// 画布背景颜色 null为透明
	}
	
    // 循环所有的 img 元素
	for (let i = 0; i < eles.length; i++) {
		const ele = eles[i];
		// 使用 html2canvas 将 img 元素转换为 canvas 对象
		const canvas = await html2canvas(ele, style);
		// 将 canvas 添加到 PDF 文档中
		pdf.addImage(
			canvas.toDataURL('image/png'),
		  'PNG',
		  0,
		  0,
		  pdf.internal.pageSize.width,
		  pdf.internal.pageSize.height
		)
		// 如果不是最后一个元素，则添加一页 PDF 文档
		if (i !== eles.length-1) pdf.addPage();
	}
	
    // 生成pdf
	pdf.save(pdfName);
	
	// 将 PDF 导出为 base64 数据
	const pdfBase64 = pdf.output('datauristring');
	return pdfBase64;

};



export default {
	downloadPDF,
}