html2canvas + jspdf 纯前端HTML导出PDF的实现与问题

// 引入html2canvas和jspdf
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
// 导出PDF的函数
function exportPDF(id) {
  const element = document.getElementById(id);
  html2canvas(element).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF({
      orientation: 'landscape',
    });
    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.save('download.pdf');
  });
}
 
// 使用示例
exportPDF('content-to-print');

这段代码首先引入了html2canvas和jspdf这两个库，然后定义了一个exportPDF函数，该函数接受一个元素ID作为参数，并使用html2canvas将其转换为canvas，然后将canvas中的图片通过jspdf添加到PDF中，并保存。使用时，只需调用exportPDF('content-to-print')并传入需要导出的元素ID即可。