适用于主流浏览器导出Excel表格的代码

适用于主流浏览器导出Excel表格的代码

问题描述:

有时候写项目会遇到在网页点击按钮可以把网页上显示的table表格数据从浏览器上直接下载下来,
优点是用户可以自由选择有价值的数据进行下载到用户本地然后用Excel软件进行数据的各种操作.
有了需求,那么问题就来了,怎样写适用于主流浏览器的导出表格代码,或者是其他浏览器导不出表格的问题如歌解决呢?

问题代码:

问题现象:

我在做项目是就遇到了项目需求用户点击按钮导出Excel表格,以上是当时写的代码;
代码写完后,谷歌和IE edge 都没有问题,可以顺利导出来,但是火狐和IE浏览器导不出Excel表格
后来也是多方查找资料,终于解决了这个问题,代码如下:

问题解决:

Axios.post('allot/showResult//excel',fd,{responseType:'arraybuffer'})
        .then(res => {
            // // console.log(res)
            let fileName = "调拨详情.xls"
            let blob = new Blob([res.data],{type:'application/x-xls'})
            if (window.navigator.msSaveOrOpenBlob) {
               navigator.msSaveBlob(blob, fileName)
            } else {
              let link = document.createElement('a')
              link.download = fileName
              link.href = window.URL.createObjectURL(blob)
              document.body.appendChild(link)
              link.click()
              window.URL.revokeObjectURL(link.href)
            }
        })

其实,就是增加了一行代码,细心的小伙伴肯定一经发现了:

document.body.appendChild(link)

我当时查到的资料跟我代码结构差不多,但是还比我多好多行代码,我为了弄清楚一个一个试用的,终于让我的代码改动最少就能实现了,happy~
然后,这一行代码的作用就是火狐浏览器在导出表格的时候会有一弹框出来,这行代码就起这个作用的,如下图:

IE导不出表格是导出方式的判断先后问题
要先判断IE,然后再判断非IE的导出方式

if(window.navigator.msSaveOrOpenBlob) {   // 而不是'download' in document.createElement('a')
navigator.msSaveBlob(blob, fileName)
} else {
// 其他代码
}

希望这些能帮到大家~