vue中使用html2canvas插件实现页面内容转换为PDF格式报告

概要：

      要求实现填写完成用户资料后，点击“下载pdf报告”按钮，将该PDF报告下载到本地，并且上传到服务器中。

实现思路：

1.使用html2canvas插件；

2.设定需要生成pdf报告的<div id='report'>下载pdf报告</div>；

3.使用html2canvas插件中的API将<div id='report'>下载pdf报告</div>中的内容转换为二进制数据流并将生成的PDF转换成Blob对象；

4.调用后端（uploadDoc）接口，上传到服务器。

 handlePDFreport() {
      const captureDiv = document.getElementById("report");//获取到需要生成pdf报告的页面div
      html2canvas(captureDiv)
        .then((canvas) => {
          // 生成pdf
          const imgData = canvas.toDataURL("image/png");
          const pdf = new jsPDF();
          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("报告解读.pdf");
          this.$message.success("报告解读已生成!");
          // 将生成的pdf上传到服务器
          // 将生成的PDF转换成Blob对象
          var blob = pdf.output("blob");
          // 创建FormData对象
          var formData = new FormData();
          // 将生成的PDF添加到FormData中
          formData.append("docFile", blob, "generated-pdf.pdf");
          uploadDoc(formData)
            .then((res) => {
              if (res) {
                let _url = res.fileUrl;
                let _data={
                  reportId:this.reportInfo.reportId,
                  reportUrl:_url
                }
                editfundUpdateReport(_data).then((res) => {
                  if (res.code == 200) {
                    this.$message.success("报告上传成功！");
                    this.getList();
                  }
                });
              }
            })
          // 结束
          this.showReport = false;
        })
        .catch((error) => {
          console.error("截图和生成PDF时发生错误:", error);
        });
    },