當前位置:首頁 >  站長 >  編程技術(shù) >  正文

ajax post下載flask文件流以及中文文件名問題

 2020-11-25 13:48  來源: 腳本之家   我來投稿 撤稿糾錯

  域名預(yù)訂/競價,好“米”不錯過

這篇文章主要介紹了ajax post下載flask文件流以及中文文件名問題,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

ajax post下載文件

后端返回文件流,flask中可使用 return send_file(文件路徑) 返回二進制文件流,在headers中傳送文件相關(guān)信息(如文件名)。

前端使用 URL.createObjectURL() 創(chuàng)建創(chuàng)建一個 DOMString URL對象,創(chuàng)建一個 a 節(jié)點,將URL對象賦給a節(jié)點的 href 屬性,最后調(diào)用 click() 方法點擊該 a 節(jié)點即可彈出瀏覽器下載框。

展示圖片

方法同上,將 a 改成 img , href 改成 src 即可,將URL對象寫入到目標img標簽的src即可。

另一種方法是后端返回圖片轉(zhuǎn)base64的字符串,src的值形如 "data:image/svg+xml;base64,${base字符串}" 。(這里的 svg+xml 表示圖片格式是svg,如果是png則改成png)

中文文件名亂碼

http headers中直接傳輸中文文件名,比較簡單的方法是后端進行url轉(zhuǎn)碼(這里使用python的 urllib.parse.quote ),前端使用 decodeURI() 解碼。

此外還可以設(shè)置headers的 Content-Disposition: attachment; filename*=UTF-8''xxxxx ,不過兼容性嘛……麻煩還不如直接urlcode算了,而且也懶得設(shè)置 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里面是要發(fā)送的數(shù)據(jù)
  headers: { "Content-Type": "application/json" },
  responseType: 'blob'
 })

 if (res.ok) {
  const blData = await res.blob() //拿到blob數(shù)據(jù)
  const urlObjData = window.URL.createObjectURL(new Blob([blData])) //創(chuàng)建url對象
 
  //獲取文件 進行下轉(zhuǎn)碼
  const fileName = decodeURI(fileNameres.headers.get('filename'))
 
  //創(chuàng)建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, filename, 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  # 如果不加上這行代碼,導(dǎo)致下圖的問題
    return response

沒有文件名,和文件格式,遇到這種情況,打開F12,查看response.headers 與正常的比較

總結(jié)

到此這篇關(guān)于ajax post下載flask文件流以及中文文件名的文章就介紹到這了,更多相關(guān)ajax post下載flask文件流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

來源:腳本之家

鏈接:https://www.jb51.net/article/184005.htm

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關(guān)標簽
ajax
下載

相關(guān)文章

  • Ajax實現(xiàn)頁面無刷新留言效果

    這篇文章主要為大家詳細介紹了Ajax實現(xiàn)頁面無刷新留言效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

    標簽:
    ajax
  • AJAX檢測用戶名是否存在的方法

    這篇文章主要為大家詳細介紹了AJAX檢測用戶名是否存在,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

    標簽:
    ajax
  • 使用AJAX 包含正則表達式 驗證用戶登錄的步驟

    這篇文章主要介紹了使用AJAX(包含正則表達式)驗證用戶登錄的步驟,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

    標簽:
    ajax
  • ajax使用formdata上傳文件流

    這篇文章主要為大家詳細介紹了ajax使用formdata上傳文件流,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

    標簽:
    ajax
  • Spring MVC+ajax進行信息驗證的方法

    AJAX不是新的編程語言,而是一種使用現(xiàn)有標準的新方法。這篇文章主要介紹了SpringMVC+ajax進行信息驗證,需要的朋友可以參考下

    標簽:
    ajax

熱門排行

信息推薦