码迷,mamicode.com
首页 > 其他好文 > 详细

前端数据流文件下载三种方式

时间:2018-12-12 13:25:07      阅读:1248      评论:0      收藏:0      [点我收藏+]

标签:element   bms   pre   tlb   hidden   pos   msu   inpu   vbo   

1、直接使用get请求方式进行下载:

window.open(`${url}?${qs.stringify(param)}`, ‘_blank‘);

2、使用form 表单post请求进行下载:

const postDownloadFile = (action, param) => {
    const form = document.createElement(‘form‘);
    form.action = action;
    form.method = ‘post‘;
    form.target = ‘blank‘;
    Object.keys(param).forEach((item) => {
        const input = document.createElement(‘input‘);
        input.type = ‘hidden‘;
        input.name = item;
        input.value = param[item];
        form.appendChild(input);
    });
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

postDownloadFile(url, param);

3、axios(ajax)前端根据返回数据流生成文件下载:

axios.post(url, param, {
  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 = `文件名称.zip`;
    // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
    a.href = e.target.result;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
}).catch((err) => {
  console.log(err.message);
});

 

前端数据流文件下载三种方式

标签:element   bms   pre   tlb   hidden   pos   msu   inpu   vbo   

原文地址:https://www.cnblogs.com/webbest/p/10107697.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!