前端实现文件在线预览

前端实现文件在线预览

前言
因为业务需要，很多文件需要在前端实现预览，今天就来了解一下吧。

实现方案
找了网上的实现方案，推荐几个前端实现方式，小编推荐使用pfile，亲测好用。
1、pfile的文件预览

   直接调用：http://www.pfile.com.cn/api/profile/onlinePreview?url='+encodeURIComponent(“你的文档地址”) 
   例：window.open("http://www.pfile.com.cn/api/profile/onlinePreview?url='+encodeURIComponent(“你的文档地址”) ")
	  window.location.href="window.open("http://www.pfile.com.cn/api/profile/onlinePreview?url='+encodeURIComponent(“你的文档地址”) ")"
   以上列举两种前端的调用方式，根据你的实现方式来决定，只要嵌入这个pfile的地址就可以了。
   		  
   注意！ 注意！ 注意！：
   刚开始使用时可能会出现因为你的调用方式的问题（例：1、代码编写时你的地址文档地址有误，2、代码你复制错了 等等），
   导致预览不成功，提示“地址错误”,可加pfile的服务群“531147770”，提供你的“调用地址”并发送“地址调用错误”，
   技术客服会及时给你解决， 给出你正确的调用地址，反馈你的问题，客服服务态度非常好，解决问题非常及时，
   pfile相关问题都会给你解答。
   使用了一阵非常完美，强烈推荐。

使用了一阵完美，强烈推荐。
2、简单的前端处理方式

<a href="文档地址"></a> 

这种方式在不同浏览器上表现不一样，部份手机浏览器直接不能直接不能打开或是表现为下载，基本不实用,如果预览PDF,可以使pdf.js这样的纯JS库但是实际场景用时要做各种格式判断浏览判断麻烦死了。
3、office online

window.open（ “https://view.officeapps.live.com/op/view.aspx?src=” + 文档url）; //新建窗口打开链接预览

4、前端js

window.location.href = url; //本页面内跳转链接实现预览

PDF好像要单独处理，用了一下感觉不太爽放弃了。