vue element中axios下載文件（后端Python）
•axios 接受文件流，需要設(shè)置 {responseType:'arraybuffer'}
axios.post(
apiUrl,
formdata,
{responseType:'arraybuffer'}
).then(res=> {
if (res.status === 200) {
let blob = new Blob([res.data], {
type: res.headers['content-type']
});
const fileName = res.headers['content-disposition'];
const title = fileName && (fileName.indexOf('filename=') !== -1) ? fileName.split('=')[1] : 'download';
require('script-loader!file-saver');
saveAs(blob, title);
}
})
.catch();
注： axios 中 response 表示服務(wù)器響應(yīng)的數(shù)據(jù)類(lèi)型，可以是 arraybuffer , blob, document , json , text , stream . 默認(rèn)為： json
•后端發(fā)送文件：Python
from flask import send_from_directory
@admin_bp.route('/tasksothers/download', methods=["GET", "POST"])
@auth.login_required
def api_tasksothers_download():
root_path = ''
src_name = "a.sql"
upload_path = os.path.join(root_path, src_name)
print("upload_path =", upload_path)
if os.path.isfile(upload_path):
response = send_from_directory(root_path, src_name, as_attachment=True)
print("response: ",response)
response.headers["Access-Control-Expose-Headers"] = "Content-disposition"
print("response: ", response.headers)
return response
注： 如果 response.header 中沒(méi)有添加 Access-Control-Expose-Headers 這個(gè)參數(shù)（代表：服務(wù)器允許瀏覽器訪(fǎng)問(wèn)的頭（headers）的白名單），vue中就無(wú)法獲取 content-disposition，即 res.headers['content-disposition'];無(wú)法找到
總結(jié)
以上所述是小編給大家給大家介紹的vue element中axios下載文件（后端Python），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
vue-form表單驗(yàn)證是否為空值的實(shí)例詳解
今天小編就為大家分享一篇vue-form表單驗(yàn)證是否為空值的實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例
今天小編就為大家分享一篇vue動(dòng)態(tài)設(shè)置img的src路徑實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue-cli中為單獨(dú)頁(yè)面設(shè)置背景色的實(shí)現(xiàn)方法
下面小編就為大家分享一篇Vue-cli中為單獨(dú)頁(yè)面設(shè)置背景色的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue props對(duì)象validator自定義函數(shù)實(shí)例
今天小編就為大家分享一篇vue props對(duì)象validator自定義函數(shù)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue項(xiàng)目中使用AvueJs的詳細(xì)教程
Avue.js是基于現(xiàn)有的element-ui庫(kù)進(jìn)行的二次封裝，簡(jiǎn)化一些繁瑣的操作，核心理念為數(shù)據(jù)驅(qū)動(dòng)視圖,主要的組件庫(kù)針對(duì)table表格和form表單場(chǎng)景，這篇文章給大家介紹了vue項(xiàng)目中使用AvueJs的相關(guān)知識(shí)，感興趣的朋友跟隨小編一起看看吧2022-10-10
基于vue3和element plus實(shí)現(xiàn)甘特圖
甘特圖是一種重要的項(xiàng)目管理工具,它可以通過(guò)圖形化的方式展示項(xiàng)目的進(jìn)度和時(shí)間表,甘特圖通常由一個(gè)橫軸和一個(gè)縱軸組成,甘特圖對(duì)于項(xiàng)目管理非常重要,所以本文給大家介紹了如何基于vue3和element plus實(shí)現(xiàn)甘特圖,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue-router+nginx 非根路徑配置方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
Vue3中watch監(jiān)聽(tīng)對(duì)象的屬性值(監(jiān)聽(tīng)源必須是一個(gè)getter函數(shù))
這篇文章主要介紹了Vue3中watch監(jiān)聽(tīng)對(duì)象的屬性值，監(jiān)聽(tīng)源必須是一個(gè)getter函數(shù),本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Vue開(kāi)發(fā)中遇到的跨域問(wèn)題及解決方法
在本篇文章里小編給大家整理的是關(guān)于Vue開(kāi)發(fā)中遇到的跨域問(wèn)題及解決方法，需要的朋友們可以學(xué)習(xí)下。2020-02-02
vue3中使用ant-design-vue的layout組件實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航欄和面包屑功能
這篇文章主要介紹了vue3中使用ant-design-vue的layout組件實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航欄和面包屑功能,基于一個(gè)新建的Vue3項(xiàng)目上實(shí)現(xiàn)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01