vue在线预览excel,vue office在线编辑

　　主要介绍了用vue实现office文件的在线预览，通过实例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。

　　最近在做电子档案，后端提供了华为云的oss链接。实现了点击下载文件的功能。不过他们也希望常规文件可以不下载直接预览。

　　按照原理，做文件在线预览，买个第三方服务什么的，后端部署服务，对接前端，一切都搞定了。

　　如果你受不了，第三者基本上是要钱的。如果不想交钱，有什么解决办法？

方法一

　　使用Microsoft office online进行联机预览

　　https://view.officeapps.live.com/op/view.aspx?Src=文件地址

　　例如：https://view.officeapps.live.com/op/view.aspx? src=http://www . XXX . com/XXX . PPT

方法二

　　docx云服务的在线预览和微软的差不多。

　　http://view.xdocin.com/xdoc?_xdoc=文件地址

　　前提是后端提供的文件地址是要公开可访问的链接，比如我们这里是将文件上传到华为云的。文件只支持查看，不能编辑。

　　效果如下

　　上部代码

　　！-预览图标-

　　我

　　v-if= row . doc _ URL canpreviewlist . includes(row . doc _ ext)

　　style= font-weight:bold； font-size:16px；

　　 link-type el-icon-view

　　@ click . stop= previewFileEvent(row)

　　/

　　previewFileEvent(行){

　　const typeArr=[doc ， docx ， ppt ， pptx ， xls ， xlsx]

　　让url=

　　if (typeArr.indexOf(row.doc_ext)！==-1) {

　　//使用微软的office online

　　URL= http://view . office apps . live . com/op/view . aspx？src= row.doc_url

　　}否则{

　　url=row.doc_url

　　}

　　//window.open()在中间打开。

　　常数宽度=1000；恒定高度=800

　　const top=(window . screen . avail height-height)/2

　　const left=(window . screen . avail width-width)/2

　　window.open(url，， width= width ，height= height ，top= top ，left= left)

　　}

　　我在这里使用微软提供的服务。它可以用来打开 doc ， docx ， PPT ， pptx ， xls 和 xlsx 文件。

　　其他文件已经处理过了，比如pdf，图片文件，可以直接通过链接打开。浏览器支持直接预览。

　　如果其他文件不能预览，我在这里做了限制，这样预览图标就不会显示了。

　　这里有一个问题。txt文件在浏览器中直接打开时会出现乱码。下载正常，但是还没有找到解决方案。

　　有的老板知道，拿着。O(_)O

　　txt文件乱码的原因已经找到了。和浏览器的编码格式有关系。

　　我这里的txt文件保存的时候是用utf-8编码的。但是谷歌Chrome的默认不是。

　　只有修改为相应的编码格式，显示才会正常。

　　要修改谷歌浏览器的编码格式，需要在app store安装官方插件集字符编码。

　　安装完成后，在页面上点击右键修改编码格式。

　　就是这样。本文介绍了用vue在线预览office文件的示例代码。关于vue在线预览office的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。