快捷導(dǎo)航

vue預(yù)覽 pdf、word、xls、ppt、txt文件的實(shí)現(xiàn)方法

更新時(shí)間：2022年04月28日 14:39:32 作者：根子的數(shù)據(jù)庫(kù)

這篇文章主要介紹了vue預(yù)覽 pdf、word、xls、ppt、txt文件的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

首先說(shuō)下為什么要分享：網(wǎng)上教的都是特么的啥玩意！??！真特么垃圾，各種方法說(shuō)不到點(diǎn)子上?。?！真是特么氣死我了！還有那群只會(huì)復(fù)制粘貼的帖子！自己都不做測(cè)試就會(huì)復(fù)制粘貼別人的，然后就發(fā)出來(lái)誤人子弟，我真是醉了！

說(shuō)下方法

1. 在頁(yè)面內(nèi)加個(gè) iframe

src地址即為要展示的文件地址

這里我用的是 elementui ，你們?nèi)绻闷渌囊彩怯胕frame就得了

2. word、xls、ppt這些文件

要用微軟官方的預(yù)覽地址

注意：1. 文件地址必須公網(wǎng)；2. 靜態(tài)資源不要有訪問(wèn)權(quán)限

最后，你控制的只是src地址

微軟解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地址

這里我只是控制了 imgVisbleURL 變量然后 iframe的src就取的這個(gè)變量的地址

3. 最終效果

（1）txt

（2）word、xls、ppt

（3）pdf

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解VUE里子組件如何獲取父組件動(dòng)態(tài)變化的值
這篇文章主要介紹了詳解VUE里子組件如何獲取父組件動(dòng)態(tài)變化的值，子組件通過(guò)props獲取父組件傳過(guò)來(lái)的數(shù)據(jù)，子組件存在操作傳過(guò)來(lái)的數(shù)據(jù)并且傳遞給父組件,需要的朋友可以參考下
2018-12-12
一篇文章讓你看懂封裝Axios
axios的封裝和api接口的統(tǒng)一管理,其實(shí)主要目的就是在幫助我們簡(jiǎn)化代碼和利于后期的更新維護(hù),這篇文章主要給大家介紹了關(guān)于封裝Axios的相關(guān)資料,需要的朋友可以參考下
2022-01-01
Vue.js實(shí)現(xiàn)一個(gè)自定義分頁(yè)組件vue-paginaiton
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)一個(gè)自定義分頁(yè)組件vue-paginaiton的具體代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
前端構(gòu)建工具Webpack、Vite區(qū)別有哪些
Webpack和Vite是兩種主流的前端構(gòu)建工具,它們?cè)诠δ?、性能和使用?chǎng)景上有所不同,Webpack提供豐富的功能和配置,適合大型復(fù)雜項(xiàng)目,但可能導(dǎo)致啟動(dòng)和構(gòu)建速度較慢,Vite基于ES模塊,支持快速的熱替換,適合小型或中等項(xiàng)目,需要的朋友可以參考下
2024-10-10
vue調(diào)用swiper插件步驟教程(最易理解且詳細(xì))
有時(shí)候我們需要在vue中使用輪播組件,如果是在vue組件中引入第三方組件的話,最好通過(guò)npm安裝,從而進(jìn)行統(tǒng)一安裝包管理,下面這篇文章主要給大家介紹了關(guān)于vue調(diào)用swiper插件的相關(guān)資料,需要的朋友可以參考下
2023-04-04
Vue.js實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片切換
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
解決vuex改變了state的值,但是頁(yè)面沒(méi)有更新的問(wèn)題
這篇文章主要介紹了解決vuex改變了state的值,但是頁(yè)面沒(méi)有更新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue正確使用watch監(jiān)聽(tīng)屬性變化方式
這篇文章主要介紹了vue正確使用watch監(jiān)聽(tīng)屬性變化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue:el-input輸入時(shí)限制輸入的類(lèi)型操作
這篇文章主要介紹了vue:el-input輸入時(shí)限制輸入的類(lèi)型操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue router返回到指定的路由的場(chǎng)景分析
這篇文章主要介紹了vue router返回到指定的路由的場(chǎng)景分析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-11-11