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'];無法找到
總結(jié)
以上所述是小編給大家給大家介紹的vue element中axios下載文件（后端Python），希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
setup是Vue3中引入的一個新的組件選項，是Vue3中函數(shù)式組件的核心部分，它提供了一種新的方式來編寫組件邏輯，下面就來和大家講講它的使用和原理2023-08-08
iview-table組件嵌套input?select數(shù)據(jù)無法雙向綁定解決
這篇文章主要為大家介紹了iview-table組件嵌套input?select數(shù)據(jù)無法雙向綁定解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本文主要介紹了Vuex3和Vuex4有哪些區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
在Vue中最重要、最核心的概念之一就是響應式系統(tǒng)。這個系統(tǒng)使得Vue能夠自動追蹤數(shù)據(jù)變化，并在數(shù)據(jù)發(fā)生變化時自動更新相關的DOM元素。本文將會探討Vue響應式系統(tǒng)的實現(xiàn)原理及其底層實現(xiàn)2023-03-03
本文給大家分享一段詳細的代碼給大家介紹Vue+Vux項目實踐思路,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了Vue CLI3 如何支持less的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue?頁面卡死,點擊無反應的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue項目如何解決數(shù)字計算精度問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了Vue3中進行二維碼的生成與解碼實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
vue-pdf實現(xiàn)pdf在線預覽并實現(xiàn)自定義預覽框高度
這篇文章主要介紹了vue-pdf實現(xiàn)pdf在線預覽并實現(xiàn)自定義預覽框高度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03