如何使用“ngx-doc-viewer2”之类的库在应用程序内部预览 *.docx 和 *.xlsx

Question

已经 3 天了，我正在寻找一个解决方案来在我的角度应用程序中显示我的 *.docx 和 *.xlxs 文件。我有一个将文件作为 blob 返回的 API。现在，我想用那个 blob 来显示文件。我可以使用

window.open(blobLink)

轻松下载文件，但是，我的主要任务是查看文件。因此，我搜索并找到了 ngx-doc-viewer，它不适用于我目前发现的 blob 链接，并且文件需要公开访问。但是，我的应用程序将在本地网络中运行。那么，我该如何解决这个问题。下面是我的 *.ts 和 HTML 代码=>
TS

getFile(fileData: File) {
        this.tempBlob= null;
    
        this.ProposalService.getFile(fileData).subscribe(
            (retFileData: any) => {
                this.tempRetFileData = retFileData;
            },
            (err: Error) => {
                
            },
            () => {
                const blob = new Blob([this.tempRetFileData], { type: this.contentType });
                this.docURL = window.URL.createObjectURL(blob);
            }
        );
    }

HTML

<ngx-doc-viewer [url]="docURL" viewer="google" style="width:100%;height:50vh;"></ngx-doc-viewer>

Answer 1

对于 blob 类型使用 viewer="mammoth":

<ngx-doc-viewer [url]="docURL" **viewer="mammoth"** style="width:100%;height:50vh;"></ngx-doc-viewer>

要使用猛犸象，还要添加：

npm install mammoth --save

并确保加载了 mammoth.browser.min.js。对于 angular/cli，您将在 angular.json 中添加以下内容：

    "scripts": [
        "node_modules/mammoth/mammoth.browser.min.js"
    ]