vue實(shí)現(xiàn)在線預(yù)覽office文件的示例代碼
最近在做電子檔案，后端提供了文件的華為云的oss鏈接。已經(jīng)實(shí)現(xiàn)了點(diǎn)擊下載文件的功能。但是呢，他們又希望常規(guī)的文件，可以直接點(diǎn)擊預(yù)覽，不需要下載。
按道理說，做文件的在線預(yù)覽，買個(gè)第三方服務(wù)什么的，后端部署一下服務(wù)，前端對(duì)接一下，就通通搞定。
頂不住第三方基本上是要money的。那不想掏money，還有什么解決方法呢。
方法一
用微軟的office online進(jìn)行在線預(yù)覽
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云服務(wù)的在線預(yù)覽，用法跟微軟差不多
http://view.xdocin.com/xdoc?_xdoc=文件地址
前提是后端提供的文件地址是要公開可訪問的鏈接，比如我們這里是將文件上傳到華為云的。文件只支持查看，不能編輯。
效果如下
上代碼
<!-- 預(yù)覽圖標(biāo) -->
<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)
}
我這里使用的是微軟提供的服務(wù)?？梢杂脕泶蜷_'doc', ‘docx', ‘ppt', ‘pptx', ‘xls', 'xlsx'文件。
對(duì)其他文件做了一些處理，比如pdf,圖片文件這些是可以直接通過鏈接打開的，瀏覽器支持直接預(yù)覽。
而其他文件無法預(yù)覽的，我這里做了限制，不讓預(yù)覽圖標(biāo)顯示出來。
這里遇到個(gè)問題，txt文件，直接在瀏覽器打開是亂碼的。下載下來是正常的，沒找到解決方法。
有大佬知道的，帶帶。O(∩_∩)O
txt文件亂碼的原因找到了。跟瀏覽器的編碼格式有關(guān)。
我這里的txt文件，保存的時(shí)候是utf-8編碼。但是谷歌瀏覽器默認(rèn)的不是。
要修改成對(duì)應(yīng)的編碼格式，顯示才會(huì)正常。
修改谷歌瀏覽器編碼格式，需求到應(yīng)用商店安裝一個(gè)官方插件Set Character Encoding
安裝完后，在頁面右鍵點(diǎn)擊修改編碼格式即可。
到此這篇關(guān)于vue實(shí)現(xiàn)在線預(yù)覽office文件的示例代碼的文章就介紹到這了,更多相關(guān)vue 在線預(yù)覽office 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式
這篇文章主要介紹了vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
webpack+vuex+axios 跨域請(qǐng)求數(shù)據(jù)的示例代碼
本篇文章主要介紹了webpack+vuex+axios 跨域請(qǐng)求數(shù)據(jù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue-cli3 中跨域解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
本篇文章主要介紹了vue源碼看觀察者模式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
elementUI如何動(dòng)態(tài)給el-tree添加子節(jié)點(diǎn)數(shù)據(jù)children詳解
element-ui 目前基本成為前端pc網(wǎng)頁端標(biāo)準(zhǔn)ui框架,下面這篇文章主要給大家介紹了關(guān)于elementUI如何動(dòng)態(tài)給el-tree添加子節(jié)點(diǎn)數(shù)據(jù)children的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
Vuex模塊化和命名空間namespaced實(shí)例演示
這篇文章主要介紹了Vuex模塊化和命名空間namespaced的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
假設(shè)?App?的用戶可以在短時(shí)間內(nèi)進(jìn)行多個(gè)?API?調(diào)用,但您只想顯示上次調(diào)用的結(jié)果,之前正在進(jìn)行的請(qǐng)求變得無關(guān)緊要,在這種情況下,您可以利用?Axios?攔截器,本文給大家介紹了如何使用Axios攔截器中止Vue請(qǐng)求,需要的朋友可以參考下2023-11-11
v-if 導(dǎo)致 elementui 表單校驗(yàn)失效問題解決方案
在使用 elementui 表單的過程中,某些表單項(xiàng)需要通過 v-if 來判斷是否展示,但是這些表單項(xiàng)出現(xiàn)了檢驗(yàn)失效的問題,今天小編給大家介紹v-if 導(dǎo)致 elementui 表單校驗(yàn)失效問題解決方案,感興趣的朋友一起看看吧2024-01-01
ant-design-vue table分頁onShowSizeChange后的pageNo解決
這篇文章主要介紹了ant-design-vue table分頁onShowSizeChange后的pageNo的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
本篇文章主要介紹了詳解vue+css3做交互特效的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11