ファイルのダウンロードの先端に形成されたファイルのデータフローの後端部、

原則：インターフェースの代わりに、ファイルパスの定義をダウンロードするが、この方法は、ファイルの情報を取得することである、コンテンツのフロントエンドがファイルに書き込まれ、ファイルのAPIの内容を介して取得することができ、ウェブページ上のイベントをクリックして使用するには、作成しますファイルとファイル情報は、それを保存し、ファイルに書き込まれます。

メインは、内のJavaScriptとHTML5のBlobオブジェクトにFileReaderのオブジェクトを使用しています。コードは以下の通りであります：

パイソン/ジャンゴ：

from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
import csv from django.http import StreamingHttpResponse #下载 @csrf_exempt def download(request): # Create the HttpResponse object with the appropriate CSV header. response = HttpResponse(content_type='text/csv') response['Content-Disposition'] = 'attachment; filename="somefilename.csv"' writer = csv.writer(response) writer.writerow(['First row', 'Foo', 'Bar', 'Baz']) writer.writerow(['Second row', 'A', 'B', 'C', '"Testing"', "Here's a quote"]) return response

JS：

<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>

axios.post('/article/download/', {}, {
  responseType: 'blob'
}).then((res) => { console.log('res', res); const blob = res.data; const reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = (e) => { const a = document.createElement('a'); a.download = `csv.csv`; // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"", a.href = e.target.result; console.log(e.target.result); document.body.appendChild(a); a.click(); document.body.removeChild(a); }; }).catch((err) => { console.log(err.message); });

FileReaderの：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL#Live_Result

ブロブ：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob