Angular 5中PDF文件的Base64保存与加载问题咨询

嘿，我来帮你搞定Angular 5里PDF保存和加载的这两个问题：

当然没问题！不过有个小细节可以提一下：你示例里的fileBase64带了data:application/pdf;base64,这个前缀，保存完整字符串完全能正常工作，但如果想省点存储空间，其实可以只存后面的纯Base64内容——毕竟前缀是固定的，加载的时候再加回去就好。两种方式都靠谱，看你自己的存储需求选就行。

你直接传完整Base64字符串没用，核心原因是Blob需要的是二进制数据，不是带前缀的Base64文本。正确的操作步骤得这么来：

• 先把Base64里的data:application/pdf;base64,前缀去掉，提取出纯Base64内容；
• 把纯Base64字符串解码成二进制的Uint8Array；
• 最后把这个Uint8Array传给Blob构造函数。

给你改好的TS代码示例，直接就能用：

downloadPDF(file: any) {
  // 你的示例Base64字符串（带前缀）
  var fileBase64 = "data:application/pdf;base64,JVBERi0xLjUNCiW1tbW1DQoxIDAg";
  
  // 1. 去掉data URI前缀，拿到纯Base64
  const pureBase64 = fileBase64.replace(/^data:application\/pdf;base64,/, '');
  
  // 2. 将纯Base64解码为Uint8Array二进制数据
  const binaryString = window.atob(pureBase64);
  const bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  
  // 3. 创建PDF类型的Blob
  const blob = new Blob([bytes], { type: 'application/pdf' });
  
  // 打开PDF
  const pdfUrl = window.URL.createObjectURL(blob);
  const tab = window.open();
  tab.location.href = pdfUrl;
  
  // 记得释放URL，避免内存泄漏（延迟一秒是等页面加载完成）
  setTimeout(() => {
    window.URL.revokeObjectURL(pdfUrl);
  }, 1000);
}

要是你之前存的就是不带前缀的纯Base64，那第一步的replace操作就可以直接删掉，直接解码就行。另外，atob是浏览器原生的Base64解码方法，在Angular 5里完全兼容，不用担心版本问题。

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