Html转PDF，前端JS实现Html页面导出PDF（html2canvas+jspdf）

// 引入html2canvas和jspdf库
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
// 导出PDF的函数
function exportPDF(elementId, pdfName) {
  // 根据元素id创建一个html2canvas的canvas
  html2canvas(document.getElementById(elementId)).then(canvas => {
    // 创建一个新的jspdf文档
    const pdf = new jsPDF('p', 'mm', 'a4');
    // 将canvas转换为图片
    const img = canvas.toDataURL('image/png');
    // 将图片添加到pdf中
    const imgProps= pdf.getImageProperties(img);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(img, 'PNG', 0, 0, pdfWidth, pdfHeight);
    // 保存生成的pdf
    pdf.save(pdfName + '.pdf');
  });
}
 
// 使用方法：
// 假设你有一个id为'content'的HTML元素，你想将其导出为'my-document.pdf'
exportPDF('content', 'my-document');

这段代码提供了一个简洁的函数exportPDF，它接受两个参数：要导出的HTML元素的ID和PDF文件的名称，然后使用html2canvas和jspdf将该元素转换并导出为PDF文件。