Angular(TypeScript)中如何将普通字符串转为PDF Blob并在浏览器打开

你的问题核心是：普通字符串本身不是符合PDF规范的文件内容，你只是把字符串转成字节数组再套上application/pdf的类型标签，但这个Blob本质上还是纯文本，没有PDF文件必需的结构（比如文件头、页面定义、字体信息等），浏览器的PDF阅读器无法解析这种无效的PDF，所以显示空白。

正确实现方式 #

要把普通字符串转成可正常显示的PDF，需要先将字符串嵌入到符合规范的PDF结构中，手动写PDF格式太繁琐，推荐用成熟的前端PDF生成库jsPDF来实现：

步骤1：安装jsPDF #

通过npm安装：

npm install jspdf

步骤2：修改你的函数 #

替换原来的openPdf函数为以下代码：

import jsPDF from 'jspdf';

openPdf(data: string): void {
  // 创建PDF实例
  const doc = new jsPDF();
  // 在PDF中添加文本（参数：文本内容，X坐标，Y坐标）
  doc.text(data, 10, 10);
  // 将PDF输出为Blob
  const pdfBlob = doc.output('blob');
  // 后续打开逻辑和你原来的一致
  const url = window.URL.createObjectURL(pdfBlob);
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  link.click();
  window.URL.revokeObjectURL(url);
}

代码说明 #

• jsPDF会自动生成符合PDF规范的文件结构，包括页面、字体、布局等必要信息
• doc.text()方法负责把普通字符串添加到PDF页面上，你可以调整坐标、字体大小、字体样式等参数
• doc.output('blob')直接生成标准的PDF Blob，浏览器可以正常解析显示

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