前端将网页内容导出pdf

需求：网页点击下载按钮，将网页中的正文部分导出成pdf，不调用接口，前端直接处理 实现方式：使用html2canvas库，将DOM转换成Canvas元素，再转换base64格式，最后使用jspdf库将图片转换成pdf

const handleDownload = () => {
    const element = document.getElementsByClassName('pdf-box');
    html2canvas(element[0] as HTMLElement, {
        // 关键：库内提供的图片跨域方法
      allowTaint: false,
      useCORS: true,
    }).then((canvas) => {
      const img = canvas.toDataURL('image/png');
      const pdf = new jsPdf('p', 'pt', 'a4');
      // a4纸大小预留20页边距
      pdf.addImage(img, 'PNG', 20, 20, 595.28 - 40, (595.28 / canvas.width) * canvas.height - 40);
      pdf.save(`${detail?.title}.pdf`);
    });
  };