vue中如何下載文件導(dǎo)出保存到本地
vue下載文件導(dǎo)出保存到本地
先分析如何下載：先有一個(gè)鏈接地址，然后使用 location.href或window.open()下載到本地
看看返回?cái)?shù)據(jù)
res.config.url 中是下載鏈接地址，res.data 中是返回的二進(jìn)制數(shù)據(jù)
如何下載
...
<el-button icon="el-icon-download" @click="download(id)"></el-button>
...
download(id) { // 導(dǎo)出
this.$API({
name: 'Download',
paths: [id]
}).then(res => {
// window.open(res.config.url, '_self')或者
window.location.href = res.config.url
}).catch(error => {
this.$message({ type: 'error', message: error })
}).finally(() => {
})
}
上面情況針對(duì)的是后端返回文件流，如果后端返回的是文件名
通用下載方法
window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true
這樣就能實(shí)現(xiàn)在當(dāng)前窗口下載文件了
另一種情況
如果下載的文件既可以是txt文件或html文件也可以是壓縮包等，對(duì)于這種類(lèi)型的下載處理
download (row) { // 下載
this.$API({
name: 'DownloadResource',
params: {
path: row.path,
token: this.$Cookies.get('token')
},
headers: {
'Content-Type': 'application/octet-stream'
},
requireAuth: true
}).then (res => {
window.open(`${res.config.url}?path=${res.config.params.path}&token=${res.config.params.token}`, '_self')
}).catch(error => {
this.$message.error(error)
})
}
對(duì)于 headers 中的 'Content-Type': 'application/octet-stream' ，需要在 axios 攔截器中單獨(dú)處理
建議把 res 打印出來(lái)看里面包含的內(nèi)容
axios.interceptors.response.use(res => {
// 處理下載文件的接口
if (res.config.headers['Content-Type'] === 'application/octet-stream') {
return res
}
if (res.data.code) {
return Promise.resolve(res)
} else {
return Promise.reject(res)
}
}, error => {
return Promise.reject(error)
})
vue中a標(biāo)簽下載本地文件-未找到,原因及解決
錯(cuò)誤代碼
在vue項(xiàng)目中下載本地圖片資源時(shí)失敗并顯示未找到，項(xiàng)目中代碼為：
<a href="../../assets/bg.png" download="bg"> ? <img src="../../assets/bg.png"></img> </a>
原因
執(zhí)行npm run serve 之后，在瀏覽器的調(diào)試工具下看a標(biāo)簽和img標(biāo)簽的代碼為：
<a href="../../assets/bg.png" download="bg"> ? <img src="/img/bg.png"></img> </a>
會(huì)把圖片資源放入/img文件下，也就是說(shuō)上面的bg.png的在項(xiàng)目運(yùn)行后真實(shí)路徑為http://localhost:8080/img/bg.jpg，故a標(biāo)簽的href有誤，提示找不到文件，下載失敗。
需要注意的是，如果圖片大小小于4k，會(huì)直接把文件轉(zhuǎn)為為base64文件，并放入css文件中，不會(huì)像上述圖片一樣，解析后放入/img下面。
解決
在href里面寫(xiě)npm run serve命令運(yùn)行后的圖片路徑：
<a href="/img/bg.png" download="bg"> ? <img src="../../assets/bg.png"></img>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3標(biāo)簽中的ref屬性詳解及如何使用$refs獲取元素
這篇文章主要給大家介紹了關(guān)于vue3標(biāo)簽中的ref屬性詳解及如何使用$refs獲取元素的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue中activated的用法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了vue-cli4.0多環(huán)境配置變量與模式詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
Vue3在jsx下父子組件實(shí)現(xiàn)使用插槽方式
這篇文章主要介紹了Vue3在jsx下父子組件實(shí)現(xiàn)使用插槽方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
通過(guò)Element ui往頁(yè)面上加一個(gè)分頁(yè)導(dǎo)航條的方法
這篇文章主要介紹了通過(guò)Element ui往頁(yè)面上加一個(gè)分頁(yè)導(dǎo)航條的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
vue實(shí)現(xiàn)會(huì)議室拖拽布局排座功能
vue-draggable-resizable-gorkys是一更強(qiáng)大的拖拽組件,可以隨意拖拽,有點(diǎn)坐標(biāo),會(huì)議室拖拽布局排座是vue-draggable結(jié)合vue-draggable-resizable-gorkys進(jìn)行開(kāi)發(fā)的,本文重點(diǎn)給大家介紹vue實(shí)現(xiàn)會(huì)議室拖拽布局排座,感興趣的朋友一起看看吧2023-11-11
vue中ref引用操作DOM元素的實(shí)現(xiàn)
本文主要介紹了vue中ref引用操作DOM元素的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue-cli創(chuàng)建項(xiàng)目ERROR?in?Conflict:?Multiple?assets?emit?dif
最近vue/cli創(chuàng)建項(xiàng)目后出現(xiàn)了錯(cuò)誤,下面這篇文章主要給大家介紹了關(guān)于vue-cli創(chuàng)建項(xiàng)目ERROR?in?Conflict:?Multiple?assets?emit?different?content?to?the?same?filename?index.html問(wèn)題的解決辦法,需要的朋友可以參考下2023-02-02
關(guān)于ElementPlus中的表單驗(yàn)證規(guī)則詳解
這篇文章主要介紹了關(guān)于ElementPlus中的表單驗(yàn)證,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
Vue使用el-input自動(dòng)獲取焦點(diǎn)和二次獲取焦點(diǎn)問(wèn)題及解決
這篇文章主要介紹了Vue使用el-input自動(dòng)獲取焦點(diǎn)和二次獲取焦點(diǎn)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12