vue2文件流下載成功后文件格式錯(cuò)誤、打不開(kāi)及內(nèi)容缺失的解決方法
項(xiàng)目場(chǎng)景
后端采用文件流的方式將文件信息發(fā)送給前端,前端需要接收相應(yīng)的流信息做出對(duì)應(yīng)的操作,如接收到圖片、pdf將進(jìn)行預(yù)覽模式,將接收到壓縮包形式的則進(jìn)行文件下載。后端對(duì)相應(yīng)的文件進(jìn)行不同的傳輸方式進(jìn)行傳輸,前端則需要接收相應(yīng)的信息并進(jìn)行操作。
問(wèn)題描述
當(dāng)收到圖片、pdf則可以正常的進(jìn)行操作,當(dāng)接收到壓縮包文件流時(shí)候可以正常下載,但是下載后,下載的文件損壞了。
原因分析
由于文件不同,所以接收方式也是有區(qū)別的,普通的圖片、pdf可以采用日常的請(qǐng)求方式去請(qǐng)求,而壓縮包的請(qǐng)求需要加上接收數(shù)據(jù)格式responseType:為blob,默認(rèn)的responseType為""。
解決方案
1、圖片的解決方式
export const getFileImg = row => { return request({ url: '/api/blade-resource/oss/endpoint/get-file-secret', //請(qǐng)求路徑 method: 'get', //請(qǐng)求模式 params: row, //請(qǐng)求參數(shù) }) }
2、文件流的解決方式
export const getFileZip = row => { return request({ url: '/api/blade-resource/oss/endpoint/get-file-secret', //請(qǐng)求路徑 method: 'get', //請(qǐng)求模式 params: row, //請(qǐng)求參數(shù) responseType: 'blob', }) }
3、文件下載
/** * 下載壓縮包文件 * @param {blob} fileArrayBuffer 文件流 * @param {String} filename 文件名稱 * @param {String} fileType 文件格式 */ export const downloadZip = (fileArrayBuffer, filename, fileType) => { let data = new Blob([fileArrayBuffer], { type: fileType == 'zip' ? 'application/zip,charset=utf-8' : 'application/x-rar-compressed,charset=utf-8' }); if (typeof window.chrome !== 'undefined') { // Chrome var link = document.createElement('a'); link.href = window.URL.createObjectURL(data); link.download = filename; link.click(); console.log(data); } else if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE var blob = new Blob([data], { type: fileType == 'zip' ? 'application/zip' : 'application/x-rar-compressed' }); window.navigator.msSaveBlob(blob, filename); } else { // Firefox var file = new File([data], filename, { type: fileType == 'zip' ? 'application/zip' : 'application/x-rar-compressed' }); window.open(URL.createObjectURL(file)); } }
4、Blob下載時(shí)的文件格式
文件格式 | type類型 |
---|---|
aac | audio/aac |
.abw | application/x-abiword |
.avi | video/x-msvideo |
.azw | application/vnd.amazon.ebook |
.bin | application/octet-stream |
.bmp | image/bmp |
.bz | application/x-bzip |
.bz2 | application/x-bzip2 |
.csh | application/x-csh |
.css | text/css |
.csv | text/csv |
.doc | application/msword |
.docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
.eot | application/vnd.ms-fontobject |
.epub | application/epub+zip |
.gif | image/gif |
.htm/.html | text/html |
.ico | image/vnd.microsoft.icon |
.ics | text/calendar |
.jar | application/java-archive |
.jpeg/.jpg | image/jpeg |
.js | text/javascript |
.json | application/json |
.jsonld | application/ld+json |
.mid/.midi | audio/midi audio/x-midi |
.mjs | text/javascript |
.mp3 | audio/mpeg |
.mpeg | video/mpeg |
.mpkg | application/vnd.apple.installer+xml |
.odp | application/vnd.oasis.opendocument.presentation |
.ods | application/vnd.oasis.opendocument.spreadsheet |
.odt | application/vnd.oasis.opendocument.text |
.oga | audio/ogg |
.ogv | video/ogg |
.ogx | application/ogg |
.otf | font/otf |
.png | image/png |
application/pdf | |
.ppt | application/vnd.ms-powerpoint |
.pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
.rar | application/x-rar-compressed |
.rtf | application/rtf |
.svg | image/svg+xml |
.swf | application/x-shockwave-flash |
.tar | application/x-tar |
.tif/.tiff | image/tiff |
.ttf | font/ttf |
.txt | text/plain |
.vsd | application/vnd.visio |
.wav | audio/wav |
.weba | audio/webm |
.webm | video/webm |
.webp | image/webp |
.woff | font/woff |
.woff2 | font/woff2 |
.xhtml | application/xhtml+xml |
.xls | application/vnd.ms-excel |
.xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
.xml | application/xml 代碼對(duì)普通用戶來(lái)說(shuō)不可讀 (RFC 3023, section 3)text/xml 代碼對(duì)普通用戶來(lái)說(shuō)可讀 (RFC 3023, section 3) |
.xul | application/vnd.mozilla.xul+xml |
.zip | application/zip |
.3gp | video/3gpp audio/3gpp(若不含視頻) |
.3g2 | video/3gpp2 audio/3gpp2(若不含視頻) |
.7z | application/x-7z-compressed |
總結(jié)
到此這篇關(guān)于vue2文件流下載成功后文件格式錯(cuò)誤、打不開(kāi)及內(nèi)容缺失解決的文章就介紹到這了,更多相關(guān)vue2文件流下載后文件格式錯(cuò)誤內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式
在看element-ui的源碼的時(shí)候,注意到源碼里面有很多地方使用provide和inject的屬性,本文主要介紹了vue2實(shí)現(xiàn)provide inject傳遞響應(yīng)式,分享給大家,感興趣的可以了解一下2021-05-05深入理解Vue的插件機(jī)制與install詳細(xì)
這篇文章主要介紹的是深入理解Vue的插件機(jī)制與install,文章主要是講解install函數(shù)可以做些什么、install內(nèi)部是怎么實(shí)現(xiàn)的、 Vuex,Vue-Router插件在install期間到底干了什么,需要的小伙伴可以參考一下2021-09-09詳解從零搭建 vue2 vue-router2 webpack3 工程
本篇文章主要介紹了詳解從零搭建 vue2 vue-router2 webpack3 工程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11vue實(shí)現(xiàn)側(cè)邊欄導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)側(cè)邊欄導(dǎo)航效果,右側(cè)顯示對(duì)應(yīng)內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10Vue+Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼
本篇文章主要介紹了Vue+Flask實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證跳轉(zhuǎn)的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01Vue.js實(shí)現(xiàn)圖片的隨意拖動(dòng)方法
下面小編就為大家分享一篇Vue.js實(shí)現(xiàn)圖片的隨意拖動(dòng)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Vue關(guān)于Element UI中的文本域換行問(wèn)題
這篇文章主要介紹了Vue關(guān)于Element UI中的文本域換行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03