vue實現(xiàn)在線預覽office文件的示例代碼

更新時間：2021年10月22日 09:49:41 作者：流浪碼農~

本文主要介紹了vue實現(xiàn)在線預覽office文件，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近在做電子檔案，后端提供了文件的華為云的oss鏈接。已經實現(xiàn)了點擊下載文件的功能。但是呢，他們又希望常規(guī)的文件，可以直接點擊預覽，不需要下載。

按道理說，做文件的在線預覽，買個第三方服務什么的，后端部署一下服務，前端對接一下，就通通搞定。
頂不住第三方基本上是要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編碼。但是谷歌瀏覽器默認的不是。

在這里插入圖片描述