vue实现在线预览office文件的示例代码
最近在做电子档案，后端提供了文件的华为云的oss链接。已经实现了点击下载文件的功能。但是呢，他们又希望常规的文件，可以直接点击预览，不需要下载。
按道理说，做文件的在线预览，买个第三方服务什么的，后端部署一下服务，前端对接一下，就通通搞定。
顶不住第三方基本上是要money的。那不想掏money，还有什么解决方法呢。
方法一
用微软的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=文件地址
前提是后端提供的文件地址是要公开可访问的链接，比如我们这里是将文件上传到华为云的。文件只支持查看，不能编辑。
效果如下
上代码
<!-- 预览图标 -->
<i
v-if="row.doc_url && canPreviewList.includes(row.doc_ext)"
style="font-weight: bold;font-size:16px;"
class="link-type el-icon-view"
@click.stop="previewFileEvent(row)"
/>
previewFileEvent(row) {
const typeArr = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
let url = ''
if (typeArr.indexOf(row.doc_ext) !== -1) {
// 使用微软的office online
url = 'http://view.officeapps.live.com/op/view.aspx?src=' + row.doc_url
} else {
url = row.doc_url
}
// window.open()居中打开
const width = 1000; const height = 800
const top = (window.screen.availHeight - height) / 2
const left = (window.screen.availWidth - 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编码。但是谷歌浏览器默认的不是。
要修改成对应的编码格式，显示才会正常。
修改谷歌浏览器编码格式，需求到应用商店安装一个官方插件Set Character Encoding
安装完后，在页面右键点击修改编码格式即可。
到此这篇关于vue实现在线预览office文件的示例代码的文章就介绍到这了,更多相关vue 在线预览office 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近项目中需要在线预览WORD文档,所以给大家总结下,这篇文章主要给大家介绍了关于vue项目如何实现前端预览word与pdf格式文件的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue+elementUI的表格最后一行合计自定义显示方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
本文主要介绍了vue $attrs和$listeners的使用与区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了从eleUI的Loading知道了单例模式的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了Element布局组件el-row和el-col的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
vue3中$attrs的变化与inheritAttrs的使用详解
$attrs现在包括class和style属性。 也就是说在vue3中$listeners不存在了，vue2中$listeners是单独存在的，在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性，这篇文章主要介绍了vue3中$attrs的变化与inheritAttrs的使用 ,需要的朋友可以参考下2022-10-10
Vue.js实现"一个文件对应一个组件"，无需webpack等工具，按需加载组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
浅谈Vue2.0中v-for迭代语法的变化(key、index)
下面小编就为大家分享一篇浅谈Vue2.0中v-for迭代语法的变化(key、index)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了关于vue编译版本引入的问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家介绍了关于vue路由的配置和页面切换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
最新评论