vue实现在线预览office文件

博客讲述了如何实现电子档案的在线预览功能,包括利用微软Office Online和docx云服务预览Office文件,以及解决txt文件在浏览器中预览时可能出现的乱码问题。作者通过axios请求获取txt内容,使用Blob转码为utf-8格式,从而避免乱码。同时,分享了在Chrome浏览器中调整编码格式的插件解决方案。
摘要由CSDN通过智能技术生成

最近在做电子档案,后端提供了文件的华为云的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
安装完后,在页面右键点击修改编码格式即可。
在这里插入图片描述

======================2022/5/7更新 ====================

txt文件预览乱码的问题,还是被测试揪出来了。那没有办法了,又不能让客户自己去改浏览器的编码格式。
就开始查,csdn,思否都阅了一遍,没找到想要的答案。然后看到一篇文章,通过blob去转码的。灵机一动,在线预览也可以这样解决。

1.使用axios调用接口获取txt文件的内容
2.使用new Blob([response.data], { type: ‘application/json;charset=utf-8’ }) 进行转码
3.使用window.URL.createObjectURL(data),把blob转为url
4.再用window.open(blobUrl) 就可以啦

优化过后的代码如下

  previewFileEvent(row) {
      const typeArr = ['csv', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'rtf']
      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
      if (row.doc_ext === 'txt') {
        // 解决预览时,浏览器编码与txt文件编码不一致,导致乱码的问题。使用blob转为utf-8格式后再打开。
        this.$axios.request({
          url: url,
          method: 'get',
          responseType: 'blob'
        }).then(response => {
          const data = new Blob([response.data], { type: 'application/json;charset=utf-8' })
          console.log(data)
          let blobUrl = window.URL.createObjectURL(data)
          window.open(blobUrl, '', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left)
        })
      } else {
        window.open(url, '', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left)
      }
    }

效果图
在这里插入图片描述

Vue 3实现在线预览编辑Office文件的插件通常会依赖于一些第三方库或服务。一个比较流行的方案是使用Microsoft的Office Online或者Google的Docs、Sheets、Slides等在线服务。这些服务提供了API,可以通过嵌入的方式在网页中展示Office文件,并且支持文件在线预览和编辑功能。 使用Vue 3创建一个这样的插件,一般可以分为以下几个步骤: 1. 首先,你需要在项目中安装一个可以嵌入Office文档的组件库,比如`vue-office-viewer`。 2. 然后,在Vue 3组件中使用该库提供的组件,配置必要的属性,如文档的URL。 3. 如果需要支持编辑功能,可能需要集成相应的在线Office服务API,允许用户对文档进行在线编辑,并将更改保存回服务器或实时同步。 4. 实现登录认证机制,以便用户在编辑文件时可以使用自己的Office账户。 5. 由于安全性和授权问题,你可能还需要配置CORS策略,确保你的应用能够从第三方服务加载资源。 一个简化的Vue 3组件示例可能如下所示: ```vue <template> <div> <office-viewer :url="documentUrl" :mode="mode"></office-viewer> </div> </template> <script setup> import { ref } from 'vue'; import OfficeViewer from 'vue-office-viewer'; const documentUrl = ref('https://example.com/path/to/document.docx'); const mode = ref('view'); // 可以是 'view', 'edit', 或者其他模式 </script> ``` 请注意,这里只是一个概念性的介绍,具体的实现细节会依赖于所选择的库和API的具体要求。
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值