vue預(yù)覽 pdf、word、xls、ppt、txt文件的實現(xiàn)方法
更新時間：2022年04月28日 14:39:32 作者：根子的數(shù)據(jù)庫
這篇文章主要介紹了vue預(yù)覽 pdf、word、xls、ppt、txt文件的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
首先說下為什么要分享：網(wǎng)上教的都是特么的啥玩意?。?！真特么垃圾，各種方法說不到點子上！??！真是特么氣死我了！還有那群只會復(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue中如何實現(xiàn)pdf文件預(yù)覽的方法
- Vue中如何實現(xiàn)在線預(yù)覽word文件、excel文件
- vue實現(xiàn)在線預(yù)覽pdf文件和下載（pdf.js）
- vue使用pdf.js預(yù)覽pdf文件的方法
- vue3如何實現(xiàn)PDF文件在線預(yù)覽功能
- Vue3 + Vue-PDF 實現(xiàn)PDF 文件在線預(yù)覽實戰(zhàn)
- Vue實現(xiàn)在線預(yù)覽pdf文件功能（利用pdf.js/iframe/embed）
- Vue實現(xiàn)預(yù)覽docx/xlsx/pdf等類型文件功能
- vue3中各種類型文件進(jìn)行預(yù)覽功能實例
- vue中實現(xiàn)支持txt,docx,xlsx,mp4格式文件預(yù)覽功能(純前端)
相關(guān)文章
vue中有一張響應(yīng)式系統(tǒng)的流程圖，vue會將模板語法編譯成render函數(shù)，通過render函數(shù)渲染生成Virtual?dom，但是官方并沒有對模板編譯有詳細(xì)的介紹，這篇文章帶大家一起學(xué)習(xí)下vue的模板編譯2023-07-07
el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于el-input寬度跟隨輸入內(nèi)容自適應(yīng)的實現(xiàn)方法,我們再實際應(yīng)用中可能需要input文本框能夠根據(jù)輸入字符的所占據(jù)的寬度自動調(diào)節(jié)尺寸,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了Vue.js動態(tài)組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了vue實現(xiàn)可視化可拖放的自定義表單的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue的table表格組件的封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)之ElementUI的表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細(xì)介紹了最基礎(chǔ)的vue.js雙向綁定操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了如何使用vue實現(xiàn)跨域訪問第三方http請求,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
你不知道的Vue技巧之--開發(fā)一個可以通過方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個可以通過方法調(diào)用的組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04