web前端|HTML5实现前端预览word、前端预览PDF、前端预览Excel等等，前端不安装插件预览PDF、Word、Excel【记录】

前端预览word、前端预览PDF、前端预览Excel等等

前言

公司的人力资源管理系统有个需求，预览 PDF 和 Word 合同，之前做过 PDF 预览【 】的功能，也用 微软 的网页版预览过，但是 微软的那个不支持 PDF 也是醉了。

XDOC 云预览

经多方探查，找到了一个即支持 PDF 的，也支持 Word 的，并且支持 Excel 的

用起来也简单： ：

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

不需要安装任何的插件

XDOC 预览失败

经测试，排除地址解析错误(路径有误)问题外，后端人员使用 PHPExcel 代码生成的 .xls 文件(Excel)，使用 XDOC 打不开，可能生成的文件在配置里边少了某些东西吧(头或者格式或者编码什么的)，总之，后端代码生成的 Excel 表格打不开，估计 生成的 Word 也可能有问题这里没做测试。

但是使用微软的预览可以打开后端代码生成的 Excel 。

最终建议 PASS 掉 XDOC -.-!!!

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

JS 判断文件类型:

let url = '***.pdf' // '***.word' '***.xls'
if(url.endsWith('.pdf')){ // PDF 预览

} else { // 微软或者其它的预览方式

}

PDF.JS 预览方式

点击查看 预览例子

VUE 项目预览

别人写好的，我就直接放这儿了，需要的自行查看得了

微软的预览方式：

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

微软的所有文档地址： ||

至于这个预览的文档地址，已经 404 了，广为流传的只有使用方式，见下方：

Office 官方 2013 年提供的 Office Web Viewer 详细文档，现在是 404：

2021/04/15 更换方案

【 】

更换原因：

XDOC 云预览 提示 **_ 域名 合作到期，请联系 _**
可能是希望联系一下看怎么收费的问题或者是怎么合作的问题吧，引流或者植入广告等等，
也不清楚，反正一看这个东西就烦，所以重新修改了方案

想着用微软的 http://view.officeapps.live.com/op/view.aspx?src= url 和 pdf.js 整合，自己写一个全局的组件
但是，经验证发现，微软的这个对 doc 的文件预览有问题，具体什么问题也不研究了，研究了也没法改。

之后再次调研，于是就有了这个新的方案。