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 組件庫，它允許在 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)文章
使用vue的時(shí)候,想要獲得一個(gè)指定的元素的高度時(shí),下面這篇文章主要給大家介紹了關(guān)于如何在Vue中獲取DOM元素的實(shí)際寬高的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue3計(jì)算屬性和異步計(jì)算屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
最近項(xiàng)目中使用了minio作為靜態(tài)資源管理服務(wù),所以簡單寫一下如何通過minio來上傳圖片,下面這篇文章主要給大家介紹了關(guān)于Vue中通過minio上傳文件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
使用Vue3實(shí)現(xiàn)交互式雷達(dá)圖的代碼實(shí)現(xiàn)
雷達(dá)圖是一種可視化數(shù)據(jù)的方式,用于比較多個(gè)類別中不同指標(biāo)的相對(duì)值,它適用于需要展示多個(gè)指標(biāo)之間的關(guān)系和差異的場(chǎng)景,本文給大家介紹了如何用Vue3輕松創(chuàng)建交互式雷達(dá)圖,需要的朋友可以參考下2024-06-06
vue router自動(dòng)判斷左右翻頁轉(zhuǎn)場(chǎng)動(dòng)畫效果
最近公司項(xiàng)目比較少終于有空來記錄一下自己對(duì)vue-router的一些小小的使用心得，本文給大家分享vue router自動(dòng)判斷左右翻頁轉(zhuǎn)場(chǎng)動(dòng)畫效果，感興趣的朋友一起看看吧2017-10-10
這篇文章主要介紹了vue中標(biāo)簽自定義屬性的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
router-view組件作為vue最核心的路由管理組件,在項(xiàng)目中作為路由管理經(jīng)常被使用到,本文主要為大家詳細(xì)介紹了router-view具體使用,希望對(duì)大家有所幫助2023-12-12
Vue Extends 擴(kuò)展選項(xiàng)用法完整實(shí)例
這篇文章主要介紹了Vue Extends 擴(kuò)展選項(xiàng)用法,結(jié)合完整實(shí)例形式分析了Vue Extends 擴(kuò)展選項(xiàng)相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-09-09
詳解Vue全局組件的掛載之實(shí)現(xiàn)彈窗組件
這篇文章主要為大家詳細(xì)介紹了如何通過Vue全局組件的掛載來實(shí)現(xiàn)彈窗組件，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下2022-11-11
Vue3+TypeScript實(shí)現(xiàn)二維碼生成組件
在?Web?應(yīng)用中,生成二維碼是常見的需求,本文介紹如何用?Vue3?和?TypeScript?開發(fā)一個(gè)二維碼生成組件,支持生成圖片或?canvas?形式的二維碼,并提供豐富的配置選項(xiàng),感興趣的小伙伴跟著小編一起來看看吧2024-04-04