jsPDF 出错：PNG 文件不完整或损坏”答案

【问题标题】：Error with jsPDF: Incomplete or corrupt PNG file”jsPDF 出错：PNG 文件不完整或损坏”
【发布时间】：2021-10-21 07:17:32
【问题描述】：

我在尝试将图像数据传递给 addImage 函数时出现此错误，我尝试降级 jspdf 和 html2canvas 版本，但这仍然发生，我尝试以多种不同的方式导入这两个库，但我仍然面临这个问题

这是我的代码

  export() {
    console.log('printing');
    const data = document.getElementById('reportContent');
    this.generatePDF(data);
  }

  generatePDF(htmlContent) {
    html2canvas(htmlContent).then(canvas => {
      const imgWidth = 290;
      const imgHeight = (canvas.height * imgWidth / canvas.width);
      const contentDataURL = canvas.toDataURL('image/png');
      const pdf = new jsPDF('l', 'mm', 'a4');
      const position = 10;
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
      pdf.save('report.pdf');
    });
  }

这是 HTML

    <div #reportContent style="display: none;" id = "reportContent"> 
      <table>
        <tr>
          <td style="color: red;background-color: blue;">1111
          </td>
          <td>2222
          </td>
        </tr>
      </table>
    </div>

【问题讨论】：

标签： javascript angular typescript jspdf html2canvas

【解决方案1】：

我解决了这个问题，因为使用 display:none; 在 HTML 里面我已经像这样更新了这个函数：

  export() {
    console.log('printing');
    const data = document.getElementById('reportContent');
    data.style.display = "block";
    this.generatePDF(data);
    data.style.display = "none";
  }

您无法打印隐藏的画布。

【讨论】：