|
近期项目中需要用到PC和移动端在线预览的功能，起初下载在线预览插件（试用版）发现无法支持移动端，无法满足项目要求。
集成pdf在线预览时发现了PDF.js (mozilla.github.io) ，可以通过url传参（附件路径）方式，在viewer.html中调用pdf.js代码实现pdf文件PC端和移动端在线预览的功能。
因为业务中上传了word等文件，于是继续寻找可在线预览docx、xlsx、pptx等后缀文件的工具，主要还是解决移动端的问题。
最终在一片博客中（纯前端文档预览，还要支持所有主流格式，有这一篇就足够了_docx-preview.js_喵喵喵更多的博客-CSDN博客），发现了一句话：
意外的收获
到此为止，所有的方案都被pass掉了，非常绝望。无果后，我搭上梯子，疯狂Google，终于找到了一个jquery的开源插件，叫做officeToHtml，出于对开源的尊重，这里提供一下人家的访问链接：OfficeJs | Demos，这个开源项目非常好用，引用它的demo就能直接预览主流格式，但是它是基于JQuery的。
经过半天的测试和代码合并，终于实现了一套简单的demo，具体代码如下:
 officetohtml.zip (18.48 M)
详细的操作方法如下：
1、将文件解压缩后放入到webroot下。
2、拼接url参数，实现本地文件在线预览
例如本地路径下有个文件
需要对demo.docx在线预览，可以在cpt里面写如下js脚本
//移动端js代码
var file_path="/webroot/officetohtml/pages/files/demo.docx";//文件路径从webroot开始。
var furl = "http://ip:port/webroot/officetohtml/pages/viewer.html?file=" + file_path;
var url = encodeURI(furl);
FR.doHyperlinkByGet({
url: url,
target: '_self'
});
//PC端js代码
var file_path="/webroot/officetohtml/pages/files/demo.docx";//文件路径从webroot开始。
var furl = "http://ip:port/webroot/officetohtml/pages/viewer.html?file=" + file_path;
window.open(furl);
说明:pages/viewer.html 文件是我参考demos.html为移动端写的，主要用于传参和预览，非系统自带，其他的代码几乎没有变化（除了css的所调整外）。如开源版本有更新，下载新版本后直接覆盖整套系统就可实现完整替代，保证viewer.html文件不变即可，里面涉及到css和js，可以根据实际情况调整。
可在线预览文件类型为：pptx,docx,xlsx,pdf以及各种图片格式。
| 
