zoukankan      html  css  js  c++  java
  • 前端数据流文件下载三种方式

    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);
    });
  • 相关阅读:
    在 MAC 下配置 Nginx
    Color Schema 配色随笔
    .Net与 WebAssembly 随笔
    关于Xamarin、Qml、数据绑定、MVC、MVVM 相关的散讲
    用Nuget部署程序包
    Qt3D
    Qt3D Shader
    Qt QML 2D shader
    LearnOpenGL
    Qt3D 5.9 and future
  • 原文地址:https://www.cnblogs.com/webbest/p/10107697.html
Copyright © 2011-2022 走看看