vue2.0文件流转成Excel并保存至本地

最近做项目，遇到转文件流成excel并保存到本地的需求，期间踩过一些坑，分享出来，希望帮到有希望的朋友；

一、安装file-saver，这里我用的是的npm，其他方式请自行百度

npm install file-saver --save    

二、在需要的页面引用

import { saveAs } from 'file-saver'

三、发起请求

这一步关键点是在发起请的请求头，一定要加上responseType: 'arraybuffer' 或者 responseType: 'blob'，且与params同级（重要是地方，敲黑板啦），开始我都是放在headers里面，挠头半天；在这后端定义的是get方式请求，下面是我的代码：

axios.get({

    url:'api/export/file',

    method: 'get',

    params,

    headers,

    responseType: 'arraybuffer'  // blob也可以，看实际情况

}).then(res => {

    const data = res.data //流文件实体，根据自己的情况获取

    let blob = new Blob([data], {

            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",

    });

    const fr = new FileReader()

    fr.readAsText(blob)

    fr.onload = (e) => {

            if (e.target.result.indexOf('code') !== -1) {// 导出报错

              this.$message({

                   type: 'warning',

                    message: JSON.parse(e.target.result).message

              })

            } else {// 导出成功

              const fileName = Math.floor(Math.random() * 10000)

              let type = 'application/octet-stream'

              const file = new Blob([blob], { type })

              saveAs(file, `${fileName}.xlsx`)

              this.$message({

                    type: 'success',

                    message: '操作成功，正在下载文件...'

              })

            }

      }

})

一般vue-cli都会集成axios，axios请自行封装，这里就不赘述了；

完成保存后，浏览器就会下载文件到你浏览器一般下载的目录中，希望对大家有帮助，不喜勿喷！