快捷導(dǎo)航

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

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

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

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

說下方法

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

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

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

2. word、xls、ppt這些文件

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

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

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

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

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

3. 最終效果

（1）txt

（2）word、xls、ppt

（3）pdf

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

您可能感興趣的文章:

相關(guān)文章

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