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

  • 前言
  • XDOC 云预览
  • XDOC 预览失败
  • 最终建议 PASS 掉 XDOC -.-!!!
  • PDF.JS 预览方式
  • VUE 项目预览
  • 微软的预览方式：
  • 2021/04/15更换方案


前言

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

XDOC 云预览

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

html5 word html5 word文档支持在线预览_预览PDF


用起来也简单：使用方法地址：http://view.xdocin.com/

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

html5 word html5 word文档支持在线预览_预览PDF_02


不需要安装任何的插件

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 预览方式

点击查看 pdf.js 预览例子

VUE 项目预览

别人写好的，我就直接放这儿了，需要的自行查看得了 npm vue-pdf 文档vue-pdf实现pdf文件在线预览 DEMO

微软的预览方式：
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：https://blogs.office.com/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/

2021/04/15更换方案

【查看新方案】

更换原因：

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

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

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