如何在Angular中基于Base64字符串预览Word文档？

方案1：复用ngx-doc-viewer加载Blob URL #

既然你已经能将Base64转为Blob，只需把Blob生成Object URL，就能适配ngx-doc-viewer的URL加载需求：

1. 组件内生成Blob URL：

// 假设你已去除前缀的Base64字符串
base64Word: string = '你的Base64内容';
wordBlobUrl: string = '';

ngOnInit(): void {
  this.wordBlobUrl = this.generateWordBlobUrl();
}

generateWordBlobUrl(): string {
  const byteCharacters = atob(this.base64Word);
  const byteArray = new Uint8Array([...byteCharacters].map(char => char.charCodeAt(0)));
  const blob = new Blob([byteArray], { 
    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
  });
  return URL.createObjectURL(blob);
}

// 组件销毁时释放URL，避免内存泄漏
ngOnDestroy(): void {
  URL.revokeObjectURL(this.wordBlobUrl);
}

2. 模板中调用ngx-doc-viewer：

<ngx-doc-viewer 
  [url]="wordBlobUrl" 
  viewer="microsoft" 
  style="width: 100%; height: 80vh;"
></ngx-doc-viewer>

注：viewer="microsoft"会调用微软在线预览服务，需要网络支持；替换为viewer="google"则调用谷歌服务，同样需网络。

方案2：纯前端渲染（mammoth.js） #

如果不想依赖外部在线服务，可使用mammoth.js将Word文档转为HTML后直接渲染：

1. 安装依赖：

npm install mammoth --save

2. 组件内处理Base64并转HTML：

import * as mammoth from 'mammoth';

base64Word: string = '你的Base64内容';
wordHtml: string = '';

async ngOnInit(): Promise<void> {
  const byteCharacters = atob(this.base64Word);
  const byteArray = new Uint8Array([...byteCharacters].map(char => char.charCodeAt(0)));
  const result = await mammoth.convertToHtml({ arrayBuffer: byteArray.buffer });
  this.wordHtml = result.value;
}

3. 模板中渲染HTML：

<div [innerHTML]="wordHtml" style="padding: 20px; line-height: 1.6;"></div>

注：该工具能还原Word基础格式，但复杂样式（如页眉页脚、特殊表格）可能无法完全匹配原文档。

内容的提问来源于stack exchange，提问作者ck-s