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请自行封装,这里就不赘述了;

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

你可能感兴趣的:(vue2.0文件流转成Excel并保存至本地)