vue实现在线预览office文件的示例代码

vue实现在线预览office⽂件的⽰例代码
最近在做电⼦档案，后端提供了⽂件的华为云的oss链接。

已经实现了点击下载⽂件的功能。

但是呢，他们⼜希望常规的⽂件，可以直接点击预览，不需要下载。

按道理说，做⽂件的在线预览，买个第三⽅服务什么的，后端部署⼀下服务，前端对接⼀下，就通通搞定。

顶不住第三⽅基本上是要money的。

那不想掏money，还有什么解决⽅法呢。

⽅法⼀
⽤微软的office online进⾏在线预览
⽅法⼆
⽤docx云服务的在线预览，⽤法跟微软差不多
前提是后端提供的⽂件地址是要公开可访问的链接，⽐如我们这⾥是将⽂件上传到华为云的。

⽂件只⽀持查看，不能编辑。

效果如下
上代码
<!-- 预览图标 -->
<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 = '/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 内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。