web前端HTML5实现前端预览word、PDF、Excel等文件方式

最新推荐文章于 2026-07-09 11:16:52 发布

原创最新推荐文章于 2026-07-09 11:16:52 发布 · 4.1k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html

在公司的后台管理系统中，为实现预览PDF和Word合同的需求，发现了一个同时支持PDF、Word和Excel预览的方案——XDOC。用户无需安装任何插件，但需要注意PHPExcel生成的.xls文件可能无法被XDOC打开，推荐使用微软预览非PDF文件和pdf.js预览PDF文件。

公司的后台管理系统有个需求，预览PDF和Word合同，也用微软的网页版预览过，但是微软的不支持 PDF。

经多方探查，找到了一个即支持 PDF 的，也支持 Word 的，并且支持 Excel 的（支持格式很多可以查看下面网址确认）

使用方法地址：http://view.xdocin.com/
xdoc代码如下：（encodeURIComponent()函数中填写自己的文件地址并且能在外网访问到）

window.open("https://view.xdocin.com/xdoc?_xdoc=" + encodeURIComponent("https://view.xdocin.com/doc/preview.docx"));

无需要安装任何的插件

注意

经测试，后端人员使用 PHPExcel 代码生成的 .xls 文件(Excel)，使用 XDOC 打不开，其它程序导出的xls，word文档请自行测试。可能生成的文件在配置里边少了某些东西吧(头或者格式或者编码什么的)，或者第三方解析能力有限总之，PHPExcel代码生成的 Excel 表格打不开

SO：

这里建议，非PDF的使用微软的预览，由于微的预览不支持 PDF 格式，所以如果是 PDF 格式的可以使用 XDOC 或者 pdf.js 预览。

点击查看 pdf.js 预览例子

微软的预览方式：encodeURIComponent()函数中填写自己的文件地址并且能在外网访问到

window.open("http://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent("https://www.***.com/upload_files/编号12的.xls"));

判断文件类型（以下是整合代码）

let url = '***.pdf' // '***.word' '***.xls'
if(url.endsWith('.pdf')){ // PDF 预览
	window.open("https://view.xdocin.com/xdoc?_xdoc=" + encodeURIComponent("https://view.xdocin.com/doc/preview.docx"));
} else { // 微软或者其它的预览方式
	window.open("http://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent("https://www.***.com/upload_files/编号12的.xls"));
}

标签

#html