ajax post下載檔案

後端返回檔案流，flask中可使用 return send_file(檔案路徑) 返回二進位制檔案流，在headers中傳送檔案相關資訊（如檔名）。

前端使用 URL.createObjectURL() 建立建立一個 DOMString URL物件，建立一個 a 節點，將URL物件賦給a節點的 href 屬性，最後呼叫 click() 方法點選該 a 節點即可彈出瀏覽器下載框。

展示圖片

方法同上，將 a 改成 img ， href 改成 src 即可，將URL物件寫入到目標img標籤的src即可。

另一種方法是後端返回圖片轉base64的字串，src的值形如 "data:image/svg+xml;base64,${base字串}"

中文檔名亂碼

http headers中直接傳輸中文檔名，比較簡單的方法是後端進行url轉碼（這裡使用python的 urllib.parse.quote ），前端使用 decodeURI() 解碼。

此外還可以設定headers的 Content-Disposition: attachment; filename*=UTF-8''xxxxx ，不過相容性嘛……麻煩還不如直接urlcode算了，而且也懶得設定 Content-Disposition 了，前端從 Content-Disposition 中取 filename 也是夠麻煩的，會取到一長串字串然後自己再想辦法取出來 filename= 後面的資訊。

程式碼如下：

flask

from urllib.parse import quote
@file.route('/download',methods=["POST"])
def download_file():
  filename='xx' #檔名
  filepath='xx/xx' #檔案路徑
  res = make_response(send_file(filepath))
  #自定義的一個header，方便前端取到名字
  res.headers['filename'] = quote(filename.encode('utf-8'))
  return res
javascript——以async非同步fetch為例：

async function download() {
  const res = await fetch(`http://xxx/file/download`,{
  method: "POST",body: JSON.stringify({}),//body裡面是要傳送的資料
  headers: { "Content-Type": "application/json" },responseType: 'blob'
 })

 if (res.ok) {
  const blData = await res.blob() //拿到blob資料
  const urlObjData = window.URL.createObjectURL(new Blob([blData])) //建立url物件
  
  //獲取檔案 進行下轉碼
  const fileName = decodeURI(fileNameres.headers.get('filename'))
  
  //建立a標籤 點選a標籤 達到下載目的
  const link = document.createElement('a')
  link.href = urlObjData
  link.download = fileName //下載檔案的名字
  document.body.appendChild(link)
  link.click()
  
  document.body.removeChild(link)
  window.URL.revokeObjectURL(urlObjData);
  
  //展示圖片
  //xxx.src=urlObjData
 }
}

ps：flask下載檔案---檔案流

html:

<a name="downloadbtn" class="btn btn-success pull-right" href="/downloadfile/?filename=/root/allfile/123.txt">下載</a>

py:

@app.route('/downloadfile/',methods=['GET','POST'])
def downloadfile():
  if request.method == 'GET':
    fullfilename = request.args.get('filename')
　　　　# fullfilename = '/root/allfile/123.txt'
    fullfilenamelist = fullfilename.split('/')
    filename = fullfilenamelist[-1]
    filepath = fullfilename.replace('/%s'%filename,'')
    #普通下載
    # response = make_response(send_from_directory(filepath,filename,as_attachment=True))
    # response.headers["Content-Disposition"] = "attachment; filename={}".format(filepath.encode().decode('latin-1'))
    #return send_from_directory(filepath,as_attachment=True)
    #流式讀取
    def send_file():
      store_path = fullfilename
      with open(store_path,'rb') as targetfile:
        while 1:
          data = targetfile.read(20 * 1024 * 1024)  # 每次讀取20M
          if not data:
            break
          yield data

    response = Response(send_file(),content_type='application/octet-stream')
    response.headers["Content-disposition"] = 'attachment; filename=%s' % filename  # 如果不加上這行程式碼，導致下圖的問題
    return response

沒有檔名，和檔案格式，遇到這種情況，開啟F12，檢視response.headers 與正常的比較

總結

到此這篇關於ajax post下載flask檔案流以及中文檔名的文章就介紹到這了,更多相關ajax post下載flask檔案流內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！