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