Angular 8中如何通过POST方法将jsPDF输出发送至后端API服务

你当前代码里调用的PDF.save('test.pdf')只会触发浏览器本地下载，不会返回可用于接口传输的文件对象。jsPDF 原生提供了output()方法直接输出二进制格式的PDF内容，不需要额外转码即可发送给后端，具体实现如下：

• 调整PDF生成逻辑，获取传输用的文件数据
  保留你原有的canvas转图片、PDF内容拼接逻辑，把save()调用替换为output()输出Blob格式数据，Blob是浏览器文件上传兼容性最好的格式：

  const URI = canvas.toDataURL('image/png');
  const fileWidth = 100;
  const PDF = new jsPDF('p', 'mm', 'a4');
  // 原addImage仅传3个参数时，y坐标默认取0、图片高度按原始比例自动适配，有排版需求可补全后续坐标、宽高参数
  PDF.addImage(URI, 'PNG', fileWidth);
  
  // 核心：输出Blob格式的PDF文件对象，替代原save调用
  const pdfBlob = PDF.output('blob', { filename: 'test.pdf' });
  

  如果后端要求接收ArrayBuffer格式，把output()第一个参数改为arraybuffer即可。

• 根据后端接口要求构造请求载荷
  两种常见对接方式二选一即可：

  • 后端接收multipart/form-data格式的普通文件上传：用FormData包装PDF对象，和普通文件上传逻辑完全一致

    const formData = new FormData();
    // 第三个参数为传给后端的文件名，可按业务需求修改
    formData.append('pdfFile', pdfBlob, 'test.pdf');
    // 其他业务参数可直接追加到FormData中
    // formData.append('reportId', '123456');
    

  • 后端直接接收application/pdf格式的二进制流：直接把pdfBlob作为请求体即可，不需要额外包装

• 调用Angular HttpClient发送请求
  注意传FormData时不要手动设置Content-Type请求头，浏览器会自动带上正确的boundary参数，手动设置反而会导致后端解析失败：

  import { HttpClient } from '@angular/common/http';
  import { inject } from '@angular/core';
  
  // 在组件/服务中注入HttpClient
  private http = inject(HttpClient);
  
  // FormData上传场景
  this.http.post('/your-backend-upload-url', formData)
    .subscribe(res => {
      // 上传成功后的业务逻辑，比如提示成功、跳转页面
      console.log('PDF上传完成', res);
    });
  
  // 二进制直传场景
  this.http.post('/your-backend-binary-url', pdfBlob, {
    headers: { 'Content-Type': 'application/pdf' }
  }).subscribe(res => {
    console.log('PDF发送完成', res);
  });
  

踩坑提示：不要把canvas生成的base64字符串直接传给后端再转PDF，这种方式会让传输体积增大33%左右，还容易出现base64截断、转码后文件损坏的问题。直接用jsPDF输出的Blob/ArrayBuffer是原生PDF二进制数据，体积更小、不会出现文件损坏问题。

如果业务上既需要触发本地下载，又需要把PDF传给后端，不需要重复调用save()，拿到pdfBlob后通过临时a标签触发下载即可：

const tempUrl = URL.createObjectURL(pdfBlob);
const aTag = document.createElement('a');
aTag.href = tempUrl;
aTag.download = 'test.pdf';
aTag.click();
URL.revokeObjectURL(tempUrl);

内容的提问来源于stack exchange，提问作者Yuva