vue中post和get方式导出文件

execl表格导出在后台管理系统中非常常见，记录一下vue项目中通过get和post调用后端接口导出文件

一、get方式请求接口

1、window.location.href = host + '/api/XXX/XXX'

2、window.open( host + '/api/XXX/XXX')

3、 let link = document.createElement('a')
        link.href = host + '/api/XXX/XXX'
        link.download = '下载文件名册'
        link.click()

二、post方式请求接口

直接用post请求返回的一窜乱码似的表格流文件。需要使用Blob 对象指定要读取的文件或数据。以vue中常用的axios为例：

    this.axios.post("api-s/cs/statsprojectimprove/exportProjectImproveS",
              {improveListStr: JSON.stringify(paramsArr)},
              {responseType: "blob"}
            ).then(
              (response) => {
                const BLOB = response.data; // Blob 对象表示一个不可变、原始数据的类文件对象（File 接口都是基于Blob）
                const fileReader = new FileReader(); // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件的内容
                fileReader.readAsDataURL(BLOB); 
                // 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
                fileReader.onload = (event) => {
                  // 处理load事件。该事件在读取操作完成时触发
                  // 新建个下载的a标签，完成后移除。
                  let a = document.createElement("a");
                  a.download = `待完善项目统计报表.xlsx`;
                  a.href = event.target.result;
                  document.body.appendChild(a);
                  a.click();
                  document.body.removeChild(a);
                };
              },
              (response) => {}
            )
            .catch((error) => {});

三、注意事项

1. get请求方式传参如果是对象类型 需要 用encodeURI(JSON.stringify(params)) 转换一下
2. get请求方式拼接参数长度上限为2083，超过这个长度导出excel失败
3. post请求中的关键 api fileReader()方法ie浏览器不支持，ie下post请求导出失败

青浅个人博客:http://www.qingqian.site:9527