vue中导出Excel表格的实现代码

项目中我们可能会碰到导出excel文件的需求，一般后台管理系统中居多，将table中展示的数据导出保存到本地。当然我们也可以通过一些处理来修改要导出的数据格式，具体需求具体对待。

1、首先我们需要安装3个依赖，file-saver、xlsx和script-loader。

使用npm安装：

npm install file-saver xlsx -s
npm install script-loader -d

使用yarn安装：

yarn add file-saver xlsx -s
yarn add script-loader -d

2、在/src目录下新建一个vendor（名字也可自取）文件夹，存入blob.js和export2excel.js文件。
blob.js和export2excel.js文件地址：

当然也可以自行下载，或许会有版本的问题吧。

3、在/build/webpack.base.conf.js中新增一行代码（vendor的名字必须和第二步新建的文件夹名字相同）。

resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'vendor': path.resolve(__dirname, '../src/vendor') // 新增这一行
 }
}

4、在vue项目中的使用。

/**
 * excel导出
 */
exporttable () {
 // this.defaultdata.exportexcelmax限制一下导出的总条数
 if (this.totals <= this.defaultdata.exportexcelmax) {
  this.$confirm('确定要导出当前<strong>' + this.totals + '</strong>条数据？', '提示', {
   dangerouslyusehtmlstring: true,
   confirmbuttontext: '确定',
   cancelbuttontext: '取消'
  }).then(() => {
   this.getexpportdata()
  }).catch(() => {
  })
 } else {
  this.$confirm('当前要导出的<strong>' + this.totals + '</strong>条数据，数据量过大，不能一次导出！<br/>建议分时间段导出所需数据。', '提示', {
   dangerouslyusehtmlstring: true,
   showcancelbutton: false
  }).then(() => {
  }).catch(() => {
  })
 }
},

/**
 * 对导出数据格式处理
 */
formatjson (filterval, jsondata) {
 return jsondata.map(v => filterval.map(j => v[j]))
},

/**
 * 导出的列表数据
 */
getexpportdata: function () {
 const loading = this.$loading({
  lock: true,
  text: '正在导出，请稍等......',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
 })
 const data = {
  phoneno: this.forminline.phoneno,
  username: this.forminline.username,
  amount: this.forminline.amount,
  fee: this.forminline.fee,
  currentpage: this.currentpage,
  pagesize: this.defaultdata.exportexcelmax
 }
 // 这里封装了axios，根据自身情况修改即可
 this.http(
  this.apisetting.orderexport,
  data
 ).then((res) => {
  // handledatalist这里可以对导出的数据根据需求做下处理
  const handledatalist = res.data.list
  for (let i in res.data.list) {
   handledatalist[i].amount = res.data.list[i].amount * 100
   handledatalist[i].fee = res.data.list[i].fee + '%'
  }
  if (res.data.list.length > 0) {
   require.ensure([], () => {
    /* eslint-disable */
    // 这里的径路要修改正确
    const { export_json_to_excel } = require('../../vendor/export2excel')
    /* eslint-enable */
    // 导出的表头
    const theader = ['手机号码', '用户姓名', '交易金额', '手续费']
    // 导出表头要对应的数据
    const filterval = ['phoneno', 'username', 'amount', 'fee']
    // 如果对导出的数据没有可处理的需求，把下面的handledatalist换成res.data.list即可，删掉上面相应的代码
    const data = this.formatjson(filterval, handledatalist)
    // this.defaultdata.formatlongdate.getnow()自己写的一个获取当前时间，方便查找导出后的文件。根据需求自行可处理。
    export_json_to_excel(theader, data, '订单查询列表-' + this.defaultdata.formatlongdate.getnow())
    this.$message({
     message: '导出成功',
     duration: 2000,
     type: 'success'
    })
   })
  } else {
   this.$message({
    message: '数据出錯，请联系管理员',
    duration: 2000,
    type: 'warning'
   })
  }
  loading.close()
 }, error => {
  console.log(error)
  loading.close()
 })
}

在需要导出功能的页面加入上面三个方法，修改好需要注意的事项，导出excel表格就ok了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。