ExtJs 6.5.2嵌入文档查看器：如何同时显示PDF与Office文档？

云原生阿岚

2026-5-28

问题：ExtJS 6.5.2嵌入查看PDF与Office文档的方案

我目前使用ExtJs 6.5.2开发应用，该应用管理大量电子文档，设有文档检索界面，支持用户在嵌入查看器中查看选中的文档。PDF内容可通过以下代码正常显示：

var url = ... 
var html = '<object style="width:100%;height:100%;" data="' + url + '" type="application/pdf"><embed src="' + url + '" type="application/pdf" /></object>'; 
container.setHtml(html);

但无法显示其他类型文档，Word、Excel文档均无法正常加载；将object的type属性改为"application/msword"或"application/vnd.ms-excel"时，页面会提示“This plugin is not supported”。请问是否可通过ExtJs或外部库实现同时显示PDF与Office文档？

约束条件：

文档查看器需嵌入页面，不能在浏览器新标签页打开
文档并非存储在服务器文件系统中，而是从数据库（文件流）实时读取，页面通过调用REST API加载并获取文档内容

可行解决方案

Hey，我来帮你梳理下当前可行的方案——毕竟现在主流浏览器早就砍掉了原生Office插件的支持，靠object标签肯定走不通了，得换思路：

方案1：利用微软Office Online Viewer（零前端库成本，依赖公网）

这是最省事的方案，微软提供的免费服务能直接把Office文档转成可嵌入的网页。你只需要让后端把REST API返回的文件流生成一个临时可访问的带签名URL（防止未授权访问），然后构造iframe嵌入：

// 假设tempUrl是后端生成的临时下载链接
var officeViewerUrl = 'https://view.officeapps.live.com/op/embed.aspx?src=' + encodeURIComponent(tempUrl);
var embedHtml = '<iframe style="width:100%;height:100%;border:0;" src="' + officeViewerUrl + '"></iframe>';
container.setHtml(embedHtml);

这个方案能统一处理PDF、Word、Excel甚至PPT，而且不需要额外引入前端库。但注意：如果你的应用是内网环境，微软服务器访问不到临时URL的话就没法用；另外对文档大小有一定限制（大概10MB以内）。

方案2：前端转码库（纯前端处理，内网友好）

如果不想依赖外部服务，可以用专门的前端库把Office文档转成HTML，直接嵌入ExtJS容器：

处理Word(docx)：用mammoth.js

这个库能把docx文件转成结构清晰的HTML，支持基本样式。你需要先引入mammoth.js，然后通过Ext.Ajax获取Blob格式的文件流进行转换：

Ext.Ajax.request({
    url: '/api/get-document',
    responseType: 'blob', // 指定返回Blob类型
    success: function(response) {
        mammoth.convertToHtml({blob: response.response})
            .then(function(result) {
                // 把生成的HTML插入容器，还可以自定义样式优化显示
                container.setHtml('<div style="padding:1rem;">' + result.value + '</div>');
            })
            .catch(function(err) {
                console.error('Word转HTML失败:', err);
            });
    }
});

处理Excel(xlsx)：用SheetJS（xlsx库）

SheetJS能解析xlsx文件，把工作表转成HTML表格，适合查看数据类Excel：

Ext.Ajax.request({
    url: '/api/get-document',
    responseType: 'arraybuffer', // Excel需要用arraybuffer处理
    success: function(response) {
        var data = new Uint8Array(response.response);
        var workbook = XLSX.read(data, {type: 'array'});
        // 取第一个工作表转成HTML
        var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        var tableHtml = XLSX.utils.sheet_to_html(firstSheet);
        container.setHtml('<div style="overflow:auto;padding:1rem;">' + tableHtml + '</div>');
    }
});

处理PDF：用pdf.js增强兼容性

如果想统一前端库处理PDF，可以用Mozilla的pdf.js，它能把PDF渲染成Canvas或HTML，比原生object标签兼容性更好，还支持自定义工具栏。

这个方案的缺点是：只能处理新版Office格式（docx、xlsx），旧版doc、xls支持有限；复杂文档的样式（比如复杂表格、宏、特殊字体）可能会丢失。

方案3：后端转码（样式还原最优，适合对格式要求高的场景）

如果你的应用对文档样式还原要求很高，最好在后端完成转码：用后端库（比如Java的Apache POI、Python的python-docx/PyPDF2）把Office文档转成PDF或HTML，然后前端用你原来的PDF查看方式或者直接显示HTML。

这种方式不管新旧Office格式都能处理，样式还原最准确，但需要后端额外开发转码逻辑。

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

ExtJs 6.5.2嵌入文档查看器：如何同时显示PDF与Office文档？

方案1：利用微软Office Online Viewer（零前端库成本，依赖公网） #

方案2：前端转码库（纯前端处理，内网友好） #

处理Word(docx)：用mammoth.js #

处理Excel(xlsx)：用SheetJS（xlsx库） #

处理PDF：用pdf.js增强兼容性 #