文件流方式导出Excel表格

       之前做的项目都是在不调用后台接口的情况下，将json数据导出到excel表格，纯前端去实现导出Excel,最近做的项目，需要向后台传递不同的参数值，后台查询出符合条件的数据，以文档流的格式返回前端，前端再导出为Excel,经查阅资料，用了两种方法实现，亲测有效。有什么写的不好的地方，望指出，大家一起进步！

   

 上图是后台返回的数据，此时前端需要把查询到的数据导出为excel格式，这里介绍两种方法：

第一种：

 getExcel() {
                const url = 'URL地址';
                this.$http.post(url, this.filter, {
                    responseType: 'blob'
                }).then(res => {
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel",
                    });　　　　
                    let objectUrl = URL.createObjectURL(blob);　　　　　
                    window.location.href = objectUrl;
                }).catch(err => {
                    console.warn(err);
                });
            },

注意设置responseType！！！

Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。

语法：var aBlob = new Blob( array, options );

Blob.type:一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。

具体可参考MDN文档：Blob - Web API 接口 | MDN

此方法的缺陷：下载的excel文档的名字是创建的blob的url,且无法使创建的url为固定值，在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象

第二种：

 //导出Excel
            getExcel() {
                const url = '你的URL';
                this.$http.post(url, params, {
                    responseType: 'blob'
                }).then(res => {
                    let blob = new Blob([res.data], {
                        type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    })
                    if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(blob);
                    } else {
                        let elink = document.createElement('a');
                        elink.download = "报表.xls";
                        elink.style.display = 'none';
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        document.body.removeChild(elink);
                    }
                }).catch(err => {
                    console.warn(err);
                });
            },

第二种方法可以自己设置导出excel的名称。利用a链接，最后记得对a 链接进行移除。

之前写的 elink.download = "报表.xlsx";在自己电脑上没有问题，但是有两个同事反应说，导出的Excel下载之后无法打开。出现以下报错：

后来发现是版本问题 ，XLSX是高版本
07版以后的扩展名都是.xlsx ，是用新的基于XML的压缩文件格式取代了其目前专有的默认文件格式，在传统的文件名扩展名后面添加了字母x（即.docx取代.doc、.xlsx取代.xls，等等），使其占用空间更小，可以向下兼容xls。改为xls之后就没有问题了。

你学会了吗？