vue2中将数据导出为excel文件

概要

vue2导出数据为excel文件

 

项目使用

安装

npm install vue-json-excel--save

使用

<download-excel 
    class="export-excel-wrapper" 
    :data="data" 
    :fields="json_fields"
    :header="title" 
    name="ExcelN">
 <a-button type="primary"  style="margin-top: 10px;"> 全部导出到Excel
 </a-button>
</download-excel>

字段说明

data：需要导出的数据

fields：excel列表头(对应下图的 序号、设备编号、记录时间)

header：如下图

name：导出时excel文件的文件名，后面小编告诉你们一个小技巧不用每个页面都把文件名写死

 data() {
    return {
      selData: [],
      json_fields: {
        序号: 'deviceType',
        设备编号: 'deviceName',
        记录时间: 'recordTime',
      },
      title: 'title',
      ExcelN: '文件名.xls',
        }
}

重点！！！！！！！！！！！就是fields的配置，一定要跟你的表格数据的字段一样

还有遇到后端传回来的是数字，例如表示一个状态时，需要更改表示文字，可以如下操作：

状态: {
          field: 'assId',
          callback: (value) => {
            return  value?开：关
          },
        },

到这一步基本上就已经实现导出数据为excel了。

不过这样是导出为全部的数据，有时候可能需要勾选导出某些数据，可以在表格中写好方法，将勾选的数据存起来做个三元判断就可以导出全部数据或者勾选数据了。

补充一些小技巧，这种导出大多为页面的功能，而每个页面的路由配置有自己的路由信息。

router.beforeEach((to, from, next) => {
  let ExcelTitle = to.meta.title
  localStorage.setItem('ExcelT', JSON.stringify(ExcelTitle))
}

在路由文件中，前置路由这个方法里面，将页面的路由元信息保存起来

在使用到导出excel功能的页面

mounted(){
let ExcelT = JSON.parse(localStorage.getItem('ExcelT'))
}

mounted钩子拿到标题信息就可以了，不仅不用自己想文件名，还解放了双手！！！