vue中如何下載文件導出保存到本地
更新時間：2022年08月03日 08:43:59 作者：風如也
這篇文章主要介紹了vue中如何下載文件導出保存到本地，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue下載文件導出保存到本地
先分析如何下載：先有一個鏈接地址，然后使用 location.href或window.open()下載到本地
看看返回數(shù)據(jù)
res.config.url 中是下載鏈接地址，res.data 中是返回的二進制數(shù)據(jù)
如何下載
...
<el-button icon="el-icon-download" @click="download(id)"></el-button>
...
download(id) { // 導出
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(() => {
})
}
上面情況針對的是后端返回文件流，如果后端返回的是文件名
通用下載方法
window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true
這樣就能實現(xiàn)在當前窗口下載文件了
另一種情況
如果下載的文件既可以是txt文件或html文件也可以是壓縮包等，對于這種類型的下載處理
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)
})
}
對于 headers 中的 'Content-Type': 'application/octet-stream' ，需要在 axios 攔截器中單獨處理
建議把 res 打印出來看里面包含的內(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標簽下載本地文件-未找到,原因及解決
錯誤代碼
在vue項目中下載本地圖片資源時失敗并顯示未找到，項目中代碼為：
<a href="../../assets/bg.png" download="bg"> ? <img src="../../assets/bg.png"></img> </a>
原因
執(zhí)行npm run serve 之后，在瀏覽器的調(diào)試工具下看a標簽和img標簽的代碼為：
<a href="../../assets/bg.png" download="bg"> ? <img src="/img/bg.png"></img> </a>
會把圖片資源放入/img文件下，也就是說上面的bg.png的在項目運行后真實路徑為http://localhost:8080/img/bg.jpg，故a標簽的href有誤，提示找不到文件，下載失敗。
需要注意的是，如果圖片大小小于4k，會直接把文件轉(zhuǎn)為為base64文件，并放入css文件中，不會像上述圖片一樣，解析后放入/img下面。
解決
在href里面寫npm run serve命令運行后的圖片路徑：
<a href="/img/bg.png" download="bg"> ? <img src="../../assets/bg.png"></img>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了Vue3設計思想及響應式源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了vue element和nuxt的使用技巧分享，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vux-scroller實現(xiàn)移動端上拉加載功能過程解析
這篇文章主要介紹了vux-scroller實現(xiàn)移動端上拉加載功能過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
在Vue應用中,彈窗是一個常見的交互元素,有時我們可能希望用戶點擊彈窗外部時,彈窗能夠自動關閉,本文主要介紹了Vue點擊在彈窗外部實現(xiàn)一鍵關閉的示例代碼,感興趣的可以了解一下2024-06-06
這篇文章主要介紹了vue spa應用中的路由緩存問題與解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了基于vue自定義指令實現(xiàn)按鈕級權限控制,本文給大家介紹的非常詳細，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
這篇文章主要介紹了在vue中如何引入外部的css文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了vue連接本地服務器的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2024-01-01
這篇文章主要介紹了Vue?webpack的基本使用,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
vue插件draggable實現(xiàn)拖拽移動圖片順序
這篇文章主要為大家詳細介紹了vue插件draggable實現(xiàn)拖拽移動圖片順序，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12