vue封装文件流导出表格的方法——系列文章一

luoerdaixin

已于 2024-05-13 09:39:25 修改

阅读量173

点赞数 1

文章标签： vue.js 前端 javascript

于 2024-05-13 09:35:58 首次发布

本文链接：https://blog.csdn.net/luoerdaixin/article/details/138785786

版权

在这里插入图片描述
如果导出的时候面对这样的文件流应该怎么处理，这个时候就应该用到我们的blob啦。

首先我们写一个公共的方法，因为在一个项目里可能不止一个地方会用到导出，做前端的都知道，公共方法会让工作更加的便捷。

//导出方法
    downLoad (data, fileName) { 
      var blob = new Blob([data], { type: 'application/vnd.ms-excel' }) // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
      var downloadElement = document.createElement('a')
      var href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = fileName // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href) // 释放掉blob对象
    },

接下来就是调用导出的接口

// 导出
    bindExecl () {  //bindExecl 方法名称
      this.loading = true
      getexport({ 
      //getxport 接口名称，
        data // 这里是参数
      }).then(res => {
        this.loading = false
        console.log(res)
        if (res) {
          this.downLoad (res.data, '11111') //11111是文件名
          this.$message.success("导出成功")
        } else {
          this.$message.error("导出失败")
        }

      })
    },

这个方法是给表格用的导出方法，后续会整理其他文件的导出方法的。