http请求post,文件导出兼容IE10+

2019-08-14 10:25:14来源:博客园 阅读 ()

1.post的方法里要加responseType: 'blob'参数,不然下载的excel会乱码

2.使用{type: "application/vnd.ms-excel"}的写法,可以保存为xls格式的excel文件(兼容老版本)。而使用“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”则会保存为xlsx

3.返回结果为下载excel文档链接,使用window.open(result)即可

4.使用增加节点调用click方法,而不使用window.open(objectUrl)方法,是防止被浏览器当插件屏蔽弹出连接

5.给文件设定名字,直接在a标签的download属性中设置即可

1、方法1

axios.post('/getExcel',{},{responseType:'blob'}).then((res:any)=>{
     let reader = new FileReader()
     reader.readAsDataURL(res);
     reader.onload = (e:any)=>{
          var a = document.createElement('a');
          document.body.appendChild(a);
          a.style.display = 'none';
          a.href =  e.target.result;
          a.download = 'name.xlsx';
          a.click();
          a.remove();
     }
})

2、方法2

      var download = function (file_name:string, content:any) {
                var csvData = new Blob([content], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
                // for IE
                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                    window.navigator.msSaveOrOpenBlob(csvData, file_name);
                }
                // for Non-IE (chrome, firefox etc.)
                else {
                    var a = document.createElement('a');
                    document.body.appendChild(a);
                    a.style.display = 'none';
                    var url = window.URL.createObjectURL(csvData);
                    a.href =  url;
                    a.download = file_name;
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url);
                }
            };
            this.$axios.post('/getExcel',{},{responseType:'blob'}).then((res:any)=>{
                download('name',res);
            })

 


原文链接:https://www.cnblogs.com/gxp69/p/11283080.html
如有疑问请与原作者联系

标签:Q文件使用Chrome连接iOS

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:函数作用域查找、闭包和匿名函数整理

下一篇:JavaScript数据结构——链表的实现与应用