web
实现office文档在线预览功能
——基础积累
最近遇到一个需求,就是要实现多种文档链接的在线预览,最简单的方式就是通过window.open(url地址)
的方式来实现。
但是如果要求是在一个弹窗中预览的话,则不能通过window.open
来实现了,使用window.open
会打开一个新的浏览器标签页。
百度后发现 提供最多的就是office 文档预览 查看器
:
同时支持所有文档类型:word,excel,pdf,ppt等多种格式
的最常用就是/view?src=文档地址
方法1:/view?src=你的文档地址
对应的官网地址:XDOC文档预览云服务:/
1.用法:非常简单
<iframe :src="`/view?src=${encodeURIComponent(fileUrl)}`"frameborder="0"width="100%"height="500"></iframe>
需要用encodeURIComponent
将链接转义后,拼接到/view?src=
后面,然后通过iframe
标签渲染即可。
2.缺点:使用他们的云服务要收费——为什么没有提收费的问题!!!
这个官网其实是收费项目,至于为啥网上百度出来的预览方法中都没有提到收费问题,我就不清楚了。。。。
通过这个官网预览的文档,会将文档存储到他们的云服务上,一来针对合同之类的内容并不安全,二来存储到他们的云服务器上,只有10天的免费有效期,超过10天及会提示下面的内容了:
添加他们的QQ
号之后,有了以下的聊天内容:
注意:不同域名(二级域名也算是不同域名),每年收费400,这个真是暴力收费了。。。
弃用!!!
2.直接使用iframe
标签,但是有些链接可以直接预览,有些链接会直接下载了。
这个好像是链接本身的问题。
网上百度查询的结果是:
以上图片参考的链接:有些链接通过浏览器打开时直接就下载了,参考文章:/q/1010000041756732
最后的结论:有些链接可以预览,有些链接只能下载,是后端来处理,处理一个content-type
参数然后返回一个符合要求的链接,我们前端只需要渲染就可以了。
完成!!!
感谢大家的支持!!!
office 文档 在线预览功能实现(word excel pdf ppt等多种格式)——使用/view 提示文档过期——基础积累