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