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

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);

});

你可能感兴趣的:(前端数据流文件下载三种方式)