Angular 9中如何基于Base64预览docx、pdf、xlsx等格式文件？

一、核心思路：Base64转临时URL #

ngx-doc-viewer支持URL加载，你可以先把Base64数据转成Blob对象，再生成浏览器可识别的临时URL，就能直接复用该库。通用转换工具函数如下：

base64ToBlob(base64Data: string, contentType: string): Blob {
  // 剥离Base64前缀（data:xxx;base64,）
  const pureBase64 = base64Data.split(',')[1];
  const byteCharacters = atob(pureBase64);
  const byteArrays: Uint8Array[] = [];

  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
    const slice = byteCharacters.slice(offset, offset + 512);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    byteArrays.push(new Uint8Array(byteNumbers));
  }
  return new Blob(byteArrays, { type: contentType });
}

// 生成临时预览URL
getPreviewUrl(base64: string, contentType: string): string {
  const blob = this.base64ToBlob(base64, contentType);
  return URL.createObjectURL(blob);
}

生成URL后，直接传给ngx-doc-viewer的url参数即可。

二、分类型针对性实现 #

1. PDF文件 #

• 原生方式：用<iframe>或<embed>直接加载临时URL

  <iframe [src]="pdfPreviewUrl" width="100%" height="600px"></iframe>
  

• 专用库：使用ng2-pdf-viewer，支持直接传入Blob对象

  <pdf-viewer [blob]="pdfBlob" [render-text]="true" style="display: block;"></pdf-viewer>
  

2. DOCX文件 #

使用mammoth.js将DOCX转成HTML预览：

1. 安装依赖：npm install mammoth --save
2. 转换代码：

import * as mammoth from 'mammoth';

async previewDocx(base64: string) {
  const blob = this.base64ToBlob(base64, 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
  const arrayBuffer = await blob.arrayBuffer();
  const result = await mammoth.convertToHtml({ arrayBuffer });
  this.docxPreviewHtml = result.value;
}

3. 页面渲染：

<div [innerHTML]="docxPreviewHtml"></div>

3. XLSX文件 #

使用xlsx.js将表格转成HTML预览：

1. 安装依赖：npm install xlsx --save
2. 转换代码：

import * as XLSX from 'xlsx';

previewXlsx(base64: string) {
  const blob = this.base64ToBlob(base64, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
  const reader = new FileReader();
  
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result as ArrayBuffer);
    const workbook = XLSX.read(data, { type: 'array' });
    const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
    this.xlsxPreviewHtml = XLSX.utils.sheet_to_html(firstSheet);
  };
  reader.readAsArrayBuffer(blob);
}

3. 页面渲染：

<div [innerHTML]="xlsxPreviewHtml"></div>

三、关键注意事项 #

• 组件销毁时必须释放临时URL，避免内存泄漏：

ngOnDestroy() {
  if (this.previewUrl) {
    URL.revokeObjectURL(this.previewUrl);
  }
}

• 务必使用正确的Content-Type：
  • PDF：application/pdf
  • DOCX：application/vnd.openxmlformats-officedocument.wordprocessingml.document
  • XLSX：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

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