美文网首页
前端数据流文件下载三种方式

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

作者: 小白IT | 来源:发表于2019-11-11 17:06 被阅读0次

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

    });

    相关文章

      网友评论

          本文标题:前端数据流文件下载三种方式

          本文链接:https://www.haomeiwen.com/subject/dwntictx.html