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