根据后端的文件数据流,在前端形成下载文件(不是直接通过浏览器下载)

7 篇文章 0 订阅
4 篇文章 0 订阅

实现原理:定义的接口不是下载文件的路径,而是通过API可以获得文件的内容,由前端把内容写入到文件中,这种方法是通过获取文件信息,在网页上利用click事件,创建一个文件,然后将文件信息写入到文件中,然后保存。

主要用到了JavaScript中的Blob对象和HTML5中的FileReader对象。代码如下:

python/django:

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

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

其中,URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。相当于这个方法创建了一个传入对象的内存引用地址

http://caibaojian.com/js-download.html

不同浏览器对Blob大小限制的问题:https://segmentfault.com/q/1010000008406014

Web APP/JavaScript 下载大文件解决方案:http://ju.outofmemory.cn/entry/362215

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值