vue element中axios下載文件（后端Python）
更新時間：2019年05月10日 14:58:36 作者：binger0712
這篇文章主要介紹了vue element中axios下載文件（后端Python）的實例代碼，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下
•axios 接受文件流，需要設置 {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 表示服務器響應的數(shù)據(jù)類型，可以是 arraybuffer , blob, document , json , text , stream . 默認為： 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 中沒有添加 Access-Control-Expose-Headers 這個參數(shù)（代表：服務器允許瀏覽器訪問的頭（headers）的白名單），vue中就無法獲取 content-disposition，即 res.headers['content-disposition'];無法找到
總結
以上所述是小編給大家給大家介紹的vue element中axios下載文件（后端Python），希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
今天小編就為大家分享一篇vue-form表單驗證是否為空值的實例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
今天小編就為大家分享一篇vue動態(tài)設置img的src路徑實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
下面小編就為大家分享一篇Vue-cli中為單獨頁面設置背景色的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue props對象validator自定義函數(shù)實例
今天小編就為大家分享一篇vue props對象validator自定義函數(shù)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Avue.js是基于現(xiàn)有的element-ui庫進行的二次封裝，簡化一些繁瑣的操作，核心理念為數(shù)據(jù)驅動視圖,主要的組件庫針對table表格和form表單場景，這篇文章給大家介紹了vue項目中使用AvueJs的相關知識，感興趣的朋友跟隨小編一起看看吧2022-10-10
基于vue3和element plus實現(xiàn)甘特圖
甘特圖是一種重要的項目管理工具,它可以通過圖形化的方式展示項目的進度和時間表,甘特圖通常由一個橫軸和一個縱軸組成,甘特圖對于項目管理非常重要,所以本文給大家介紹了如何基于vue3和element plus實現(xiàn)甘特圖,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue-router+nginx 非根路徑配置方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Vue3中watch監(jiān)聽對象的屬性值(監(jiān)聽源必須是一個getter函數(shù))
這篇文章主要介紹了Vue3中watch監(jiān)聽對象的屬性值，監(jiān)聽源必須是一個getter函數(shù),本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
在本篇文章里小編給大家整理的是關于Vue開發(fā)中遇到的跨域問題及解決方法，需要的朋友們可以學習下。2020-02-02
vue3中使用ant-design-vue的layout組件實現(xiàn)動態(tài)導航欄和面包屑功能
這篇文章主要介紹了vue3中使用ant-design-vue的layout組件實現(xiàn)動態(tài)導航欄和面包屑功能,基于一個新建的Vue3項目上實現(xiàn)，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-01-01