如何将数组内容导出为自定义PDF下载并在新标签页打开

当前已实现选中表格行数据导出为自定义docx格式求职信的功能，核心代码如下：

private printCoverLetter(){
    const selectedRows: IUnprintedLookupResult[] = this.getSelectedRows()
    const doc = DocumentCreator.prototype.create(selectedRows);
    Packer.toBlob(doc).then(blob => {
      console.log(blob);
      saveAs(blob, "CoverLetter_" + this.label2 + ".docx");
    });
  }

现有docx文件导出效果如下：

目前docx导出功能运行正常，需要调整实现逻辑满足新需求：用户点击对应按钮后，直接将内容导出为PDF格式完成本地下载，同时在浏览器新标签页打开生成的PDF文件。

• 方案1：前端本地转PDF（改造成本最低，适配现有逻辑）
  你当前用的是浏览器端docx生成库，拿到生成的docx blob后，可以直接用支持浏览器运行的docx转PDF库完成格式转换，不需要后端参与：

  1. 引入适配浏览器环境的docx转PDF依赖，注意不要选依赖Node.js服务端环境的版本，避免浏览器运行报错
  2. 保留原有生成docx文档的逻辑，拿到docx blob后调用转换方法，得到PDF格式的blob对象
  3. 拿到PDF blob后并行做两个操作：调用saveAs方法将文件名后缀改为.pdf触发本地下载；基于PDF blob生成临时对象URL，传入window.open的第二个参数为_blank，即可在新标签页打开PDF
     注意：临时生成的对象URL在PDF加载完成后需要手动回收，避免不必要的内存占用，可以设置1分钟左右的延迟后调用URL.revokeObjectURL释放资源，防止打开标签页时资源被提前回收。
     改造后的核心参考代码：

  // 提前引入浏览器端docx转PDF的转换方法
  private async printCoverLetter(){
    const selectedRows: IUnprintedLookupResult[] = this.getSelectedRows()
    const doc = DocumentCreator.prototype.create(selectedRows);
    // 获取生成的docx blob
    const docxBlob = await Packer.toBlob(doc);
    // 转换为pdf blob
    const pdfBlob = await convertDocxToPdfInBrowser(docxBlob);
    // 触发PDF下载
    saveAs(pdfBlob, `CoverLetter_${this.label2}.pdf`);
    // 新标签页打开PDF
    const pdfTempUrl = URL.createObjectURL(pdfBlob);
    window.open(pdfTempUrl, '_blank');
    // 延迟释放临时URL
    setTimeout(() => URL.revokeObjectURL(pdfTempUrl), 60000);
  }
  

• 方案2：后端中转转换（PDF排版精度最高）
  如果前端本地转换出现字体缺失、排版错位、样式还原度差的问题，可以走后端转换逻辑：

  1. 前端将生成的docx blob封装到FormData中，传给后端转换接口
  2. 后端用成熟的文档转换组件完成docx到PDF的转换，将PDF文件流返回给前端
  3. 前端拿到返回的PDF blob后，后续下载、新标签页打开的逻辑和方案1完全一致
     这个方案的优势是PDF样式和原docx文件几乎完全一致，稳定性高，缺点是需要额外开发对应的后端接口。

• 方案3：直接生成PDF（运行性能最好）
  如果求职信的内容结构固定、排版不复杂，可以跳过生成docx的环节，直接用前端PDF生成库按照原有排版规则绘制生成PDF blob，后续下载、打开逻辑不变。这种方式不需要做格式转换，生成速度最快，但是如果原有docx排版规则复杂，重新编写PDF绘制逻辑的工作量会比较高，适合排版简单的场景。

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