Vue實現(xiàn)各種類型文件的預(yù)覽功能
公司最近需求當(dāng)用戶實現(xiàn)對文件上傳之后，用戶需要對所上傳的文件進(jìn)行點擊查看當(dāng)前文件的內(nèi)容，不同文件的類型太多，對部分文件進(jìn)行了處理預(yù)覽，例如：pkl、mps、txt、md、doc、xlsx、pdf、json、csv、py、png、jpg
先說對 [".txt", ".md", ".json", ".pkl", ".mps", ".py"]
[".txt", ".md", ".json", ".pkl", ".mps", ".py"]預(yù)覽
這些類的文件本身是對于文件內(nèi)容文本所預(yù)覽，如果沒有太大的樣式追求，推薦使用 VAceEditor 這個插件，
vue3-ace-editor 是一個基于 Ace Editor（流行的 web 前端代碼編輯器）封裝的 Vue 3 組件庫，它允許在 Vue 程序中輕松集成和自定義 Ace 編輯器的功能。
支持多種編程語言的語法高亮、自動補(bǔ)全、主題切換、多語言支持等高級特性，使得開發(fā)者能夠構(gòu)建功能豐富的在線代碼編輯器或 JSON 格式查看與編輯器等功能。
適用于開發(fā)IDE、在線代碼編輯器、JSON編輯器等多種應(yīng)用場景|。
這個是預(yù)覽出來的結(jié)構(gòu)
一、安裝
npm i vue3-ace-editor
自行對aceConfig這些屬性可以配置，當(dāng)你通過某個事件去觸發(fā)的時候可以去拿到地址去讀取當(dāng)前文件內(nèi)容，我這里用某個函數(shù)去接受，拿到當(dāng)前的完整地址發(fā)起請求去讀取文件流，然后讀取內(nèi)容后追加放到結(jié)果中
[".ipynb"];文件預(yù)覽
Ipynb文件跟一般文件不一樣，這個文件里面會包含圖片、代碼、文本之類的、預(yù)覽ipynb文件就需要將文件流轉(zhuǎn)換成html進(jìn)行預(yù)覽，
這里要運(yùn)用到一些插件
npm install marked ansi_up dompurify jsdom npm install prismjs npm install babel-plugin-prismjs
開源地址：vue-ipynb: Demo to view a .ipynb (python notebook) file with VUE.
它進(jìn)行預(yù)覽是通過上傳文件拿到文件流的時候進(jìn)行預(yù)覽，而我做的是后端返回地址，通過地址發(fā)請求讀取文件流，
它的開元nb文件某些情況下可能會執(zhí)行報錯，圖片可能會預(yù)覽不出來，我自己稍作了些修改，ipynb文件的圖片為統(tǒng)一為base64格式，不然圖片就不會顯示出來
它的這一塊即是我進(jìn)行修改的地方，
它的nb.parse方法接收的是兩個參數(shù)我們通過讀取文件流之后給的是一個參數(shù)，
他源文件這個地方也要修改，不然就會導(dǎo)致底層報錯，
如果報錯之類的都解決掉了之后，讀取文件流之后將轉(zhuǎn)換成html結(jié)構(gòu)，預(yù)覽出來的效果就是這樣的
這個結(jié)果就是html形式
[".doc", ".docx", ".pdf", ".xlsx", ".csv"];
前面四種有專門的插件很好預(yù)覽，
npm i @vue-office/excel npm i @vue-office/pdf npm i @vue-office/docx
這個是模板部分 直接將你完整的地址傳遞到src屬性里面
這個是script里面，你也可以通過不同的末尾去判斷顯示那個文件
csv文件預(yù)覽
這個文件預(yù)覽要用到插件，papaparse
下載
npm i papaparse
使用這個插件會有一個bug 比如說你的csv文件里面有中文，這個中文預(yù)覽出來的效果就會是一堆亂碼的樣子，比如它自帶的encoding配置只能對通過input上傳的本地文件起作用，而通過URL遠(yuǎn)程取到的文件不支持：
先用XMLHttpRequest（）獲取到文件，然后再用FileReader（）改變文件的編碼，最后用PapaParse直接解析
渲染出來的表格是沒有邊框樣式的，可以自行用css進(jìn)行加
預(yù)覽出來的效果就是這樣
看業(yè)務(wù)要求，有些文件是無法進(jìn)行預(yù)覽，可以商量直接下載
以上就是Vue實現(xiàn)各種類型文件的預(yù)覽功能的詳細(xì)內(nèi)容，更多關(guān)于Vue各種文件預(yù)覽的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)詳解
element-ui中的table的多選很好用,但是如果其中某一項禁止選擇,該怎樣操作呢,下面這篇文章主要給大家介紹了關(guān)于element-ui?table使用type='selection'復(fù)選框全禁用(全選禁用)的相關(guān)資料,需要的朋友可以參考下2023-01-01
Pinia是Vue 3的專屬狀態(tài)管理庫,旨在替代Vuex,提供更簡單、直觀的狀態(tài)管理解決方案,它支持組合式API和選項式API,允許跨組件或頁面共享狀態(tài),避免了Vuex中的許多復(fù)雜概念,本文介紹Vue中Pinia的各種詳細(xì)說明和使用示例,感興趣的朋友一起看看吧2025-01-01
今天小編就為大家分享一篇解決vuecli3.0熱更新失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue技術(shù)分享-你可能不知道的7個秘密,需要的朋友可以參考下2018-04-04
Vue3?$emit用法指南(含選項API、組合API及?setup?語法糖)
這篇文章主要介紹了Vue3?$emit用法指南,使用?emit，我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結(jié)構(gòu)中，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
在Vue環(huán)境下利用worker運(yùn)行interval計時器的步驟
這篇文章主要介紹了在Vue環(huán)境下利用worker運(yùn)行interval計時器的步驟，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作詳解
這篇文章主要介紹了vue.js前后端數(shù)據(jù)交互之提交數(shù)據(jù)操作,結(jié)合實例形式較為詳細(xì)的分析了vue.js前后端數(shù)據(jù)交互相關(guān)的表單結(jié)構(gòu)、約束規(guī)則、數(shù)據(jù)提交等相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-04-04
文章講解Vue2中使用Swiper組件的實現(xiàn)步驟,包括版本適配、組件結(jié)構(gòu)搭建、依賴安裝、ESLint配置、數(shù)據(jù)加載與圖片路徑處理,以及響應(yīng)式樣式設(shè)置,確保組件正常運(yùn)行,感興趣的朋友跟隨小編一起看看吧2025-07-07
本篇文章主要介紹了詳解VUE2.X過濾器的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue左右側(cè)聯(lián)動滾動的實現(xiàn)代碼
這篇文章主要介紹了vue左右側(cè)聯(lián)動滾動的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06