(已解决)jspdf + html2canvas实现导出html为PDF文件(高清、分页)解决图片和表格被分割截断以及滚动条的问题。(含源码及详细解释)
// 引入jsPDF和html2canvas库
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
// 导出HTML为PDF的函数
export const exportHtmlAsPdf = async (elementId, pdfFileName) => {
// 创建一个jsPDF实例
const pdf = new jsPDF('p', 'mm', 'a4');
const element = document.getElementById(elementId);
const options = {
scale: 2, // 提高清晰度,根据需要调整
logging: false,
width: element.scrollWidth,
height: element.scrollHeight,
windowWidth: element.scrollWidth,
windowHeight: element.scrollHeight,
useCORS: true, // 允许跨域
};
// 使用html2canvas将HTML元素转换为canvas
try {
const canvas = await html2canvas(element, options);
const imgData = canvas.toDataURL('image/png');
// 将canvas图像添加到PDF中
const imgProps= pdf.getImageProperties(imgData);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
// 保存生成的PDF
pdf.save(pdfFileName + '.pdf');
} catch (error) {
console.error('导出PDF时发生错误:', error);
}
};
这段代码使用了html2canvas
库来将HTML元素转换为canvas,并且使用了jspdf
库来创建PDF文件。在转换过程中,我们可以通过调整scale
参数来提高图像的清晰度,并且允许了图片的跨域使用。最后,我们保存了生成的PDF文件。这个解决方案可以有效地处理图片和表格在PDF中的展示问题,并且能够实现高清打印。
评论已关闭