0


前端或JS实现pdf、word、excel、txt等文件在线预览

前端或JS实现pdf、word、excel、txt等文件在线预览

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

实现方案
找了网上的实现方案,推荐几个前端实现方式,小编推荐使用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好像要单独处理,用了一下感觉不太爽放弃了。

标签: 前端 javascript html5

本文转载自: https://blog.csdn.net/m_skif_fjkja/article/details/137818468
版权归原作者 无稽之谈。。 所有, 如有侵权,请联系我们删除。

“前端或JS实现pdf、word、excel、txt等文件在线预览”的评论:

还没有评论