在application/octet-stream类型下,如何post导出excel文件? (application/octet-stream下载(导出) 乱码处理)

情景再现
实现一个post导出excel功能(因为参数比较多,get导出报url超长,只能用post),前期以为只是一个常规的form-data导出,但做完后一直报415。后来联调发现后端使用的是 application/octet-stream类型,这就引出来一个问题,在application/octet-stream类型下,如何post导出excel文件?

指导思想
1、用ajax请求获取数据
2、用a标签的download属性 导出文件

方法论
直接贴代码(因为是angular项目自带$http服务,不过这个不影响)

$http.post(commonService.apiPath + ‘/life/home/app/binding/user/export’, params,{
// 设置header
headers: {
‘Content-Type’: ‘application/json; application/octet-stream’
},

// 设置返回数据的类型–返回二进制数据
responseType: ‘arraybuffer’,
}).then(function(res){
// Blob 对象表示一个不可变、原始数据的类文件对象-下面这个就是接收文件内容
var b = new Blob([res.data], { type: ‘application/vnd.ms-excel’ });
// 根据传入的参数b创建一个指向该参数对象的URL
var url = URL.createObjectURL(b);
var link = document.createElement(‘a’);
// 设置导出的文件名
link.download = ‘绑定用户.xlsx’;
link.href = url;
// 点击获取文件
link.click();
})
延伸
1、在ajax请求后,返回来的是一个二进制流(在浏览器中展现为乱码);

2、URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象。

3、Blob 对象表示一个不可变、原始数据的类文件对象,一般用于大文件分割 (slice() 方法),在Chrome 中指定下载的文件名;可以参考https://www.cnblogs.com/fps2tao/p/9267034.html

4、application/octet-stream是什么?
它是content-type的一种类型,是 二进制流,在不知道下载文件类型时使用

5、vue一样可以用(注意你的请求拦截哈,别被拦住了,res.data为文件数据),如

axios.get(`${
       HDEC_API}/reports/records/download/${
       id}`, {
     
        headers: {
     
          'Content-Type': 'application/octet-stream'
          },
        responseType: 'arraybuffer',
      }).then((res) => {
     

        var b = new Blob([res.data], {
      type: 'application/vnd.ms-excel' });
        // 根据传入的参数b创建一个指向该参数对象的URL
        var url = URL.createObjectURL(b);
        var link = document.createElement('a');
        // 设置导出的文件名
        link.download = '下载文件名.xlsx';
        link.href = url;
        // 点击获取文件
        link.click();
      })


你可能感兴趣的:(技术问题集锦,javascript)