Angular5中使用html2canvas+jsPDF.addHTML添加画布报错求助

这个问题我之前帮不少开发者排查过，你遇到的ERROR Error: Uncaught (in promise): [object String]本质上是两个核心问题导致的：

1. jsPDF的addHTML方法早已被官方废弃，它依赖的是旧版html2canvas的内置实现，如果你单独引入了较新的html2canvas包，两者会产生版本冲突，抛出这种模糊的字符串错误；
2. 你本身的用法逻辑就绕了弯路——addHTML原本是用来直接渲染DOM元素的，而你已经用html2canvas把DOM转成了canvas，完全不需要再通过addHTML处理。

正确的实现方案：用addImage替代addHTML #

我们直接用html2canvas生成canvas，再通过jsPDF的addImage方法将canvas添加到PDF中，这也是官方推荐的标准做法。

步骤1：确保依赖安装正确

如果还没安装依赖，先执行：

npm install html2canvas jspdf --save

步骤2：修改组件代码

import { Component, ViewChild, ElementRef } from '@angular/core';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  @ViewChild('printSection', { static: false }) vc_print_section: ElementRef;

  generatePDF() {
    const content = this.vc_print_section.nativeElement;

    html2canvas(content, {
      scale: 2, // 提高PDF清晰度，数值越大越清晰（文件体积也会相应增大）
      useCORS: true, // 如果内容包含跨域图片，必须开启这个配置
      logging: false // 关闭控制台冗余日志，可选
    }).then(canvas => {
      // 将canvas转为PNG格式的base64数据
      const imgData = canvas.toDataURL('image/png');
      
      // 配置A4纸尺寸（单位：mm）
      const a4Width = 210;
      const a4Height = 297;
      // 计算图片在PDF中的高度，保持原canvas的宽高比
      const imgHeight = (canvas.height * a4Width) / canvas.width;
      let remainingHeight = imgHeight;
      let currentPosition = 0;

      // 初始化PDF文档
      const doc = new jsPDF('p', 'mm', 'a4');

      // 添加第一页内容
      doc.addImage(imgData, 'PNG', 0, currentPosition, a4Width, imgHeight);
      remainingHeight -= a4Height;

      // 如果内容过长，自动分页处理
      while (remainingHeight >= 0) {
        currentPosition = remainingHeight - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, currentPosition, a4Width, imgHeight);
        remainingHeight -= a4Height;
      }

      // 保存生成的PDF
      doc.save('test.pdf');
    }).catch(err => {
      console.error('生成PDF失败:', err);
    });
  }
}

步骤3：确保模板元素引用正确

在组件模板中，给需要转换为PDF的内容添加模板引用变量：

<div #printSection>
  <!-- 这里是你要转换为PDF的HTML内容 -->
</div>
<button (click)="generatePDF()">生成PDF</button>

额外注意事项 #

• 如果内容包含跨域图片，除了开启useCORS: true，还需要确保图片所在服务器配置了CORS规则，允许你的域名访问；
• 若页面有动态加载的内容（比如异步请求的数据），要确保调用html2canvas前，所有内容都已经渲染完成；
• scale参数可以根据需求调整，一般设为2就能兼顾清晰度和文件大小。

内容的提问来源于stack exchange，提问作者Shift 'n Tab