如何使用ngx-doc-viewer2在Angular应用内预览blob格式docx、xlsx文件

你当前的方案无法生效的核心原因是：ngx-doc-viewer的google预览模式需要将文件链接提交至谷歌公共服务器解析，仅支持公网可访问的公开文件，天然不支持本地blob链接、局域网私有文件。

可以选择以下两种落地方式实现需求： #

方案1：前端按文件类型分别解析（无后端改造需求） #

分别适配docx、xlsx格式，用纯前端库直接解析blob渲染，无需公网支持：

docx预览实现 #

1. 安装依赖
   npm install docx-preview
2. 修改HTML

<!-- 替换原有ngx-doc-viewer，新增docx渲染容器 -->
<div #docxContainer style="width:100%;height:50vh;"></div>

3. 修改TS代码

import { ViewChild, ElementRef } from '@angular/core';
import * as docx from 'docx-preview';

// 类内声明容器引用
@ViewChild('docxContainer') docxContainer: ElementRef;

getFile(fileData: File) {
    this.ProposalService.getFile(fileData).subscribe(
        (retFileData: any) => {
            const blob = new Blob([retFileData], { 
                type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 
            });
            // 直接渲染blob到容器
            docx.renderAsync(blob, this.docxContainer.nativeElement);
        },
        (err: Error) => {
            console.error('文件加载失败', err);
        }
    );
}

xlsx预览实现 #

1. 安装依赖
   npm install xlsx
2. 修改HTML

<div #xlsxContainer style="width:100%;height:50vh;overflow:auto;"></div>

3. 修改TS代码

import * as XLSX from 'xlsx';

@ViewChild('xlsxContainer') xlsxContainer: ElementRef;

getFile(fileData: File) {
    this.ProposalService.getFile(fileData).subscribe(
        (retFileData: any) => {
            const blob = new Blob([retFileData], { 
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
            });
            const reader = new FileReader();
            reader.onload = (e) => {
                const workBook = XLSX.read(e.target.result, { type: 'binary' });
                // 取第一个工作表转成HTML
                const workSheet = workBook.Sheets[workBook.SheetNames[0]];
                const html = XLSX.utils.sheet_to_html(workSheet);
                this.xlsxContainer.nativeElement.innerHTML = html;
            };
            reader.readAsBinaryString(blob);
        },
        (err: Error) => {
            console.error('文件加载失败', err);
        }
    );
}

方案2：后端统一转PDF预览（低前端维护成本） #

如果不想前端适配多种文件格式，可以在后端新增格式转换接口，将docx、xlsx统一转成PDF格式返回blob，前端直接用内置的PDF预览能力或者pdf.js渲染即可，适配成本更低，预览样式一致性更好。 #

注意事项 #

• 调用window.URL.createObjectURL生成的blob链接，在组件销毁时需要调用window.URL.revokeObjectURL(this.docURL)主动释放内存，避免内存泄漏。
• 注意设置正确的blob contentType，避免解析失败。

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