Vue将Table表格中的数据导出至execl

前言

由于客户需求，需要将后台数据导出到excel进行备份查看然后也找到一些前辈写过，但大多都是对一些文档的 Ctrl+(A,C,V)原创我都没找到是谁(真是滑稽），然后我就想自己也写一下算是来填坑吧，不多说开始吧。

效果演示

导出结果展示

安装

首先要会Vue和一些Webpack的基础才能进行
下面需要一些 安装依赖。

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

引入之后还需要下载2个JS文件分别为 Blob.js和Export2Excel.js，我已放到GIthub下面是链接
Vue生成excel的两个必要js文件下载链接

准备工作

首先我们将2个js文件存放至一个文件夹（我是将两个文件夹放到一个名叫 "excel"的文件夹内

然后将此文件夹放到项目中src文件夹中（我是放这里了，自己看着搞生成时能找到这个就行）

OK准备工作完成，开始搞代码

开搞代码

生明：我用的Ui是Iview所以数据格式仅供参考

数据展示

<template>
  <div>
    <Table :data="data" :columns="columns"></Table>
    <Button long type="success" style="margin-top:10px;" @click="onexcel">生成报表</Button>
  </div>
</template>

数据展示出后，点击按钮将本页table里数据导出，生成excel。

数据

	data () {
	    return {
	      data:[
	        {
	          list1:'A1',
	          list2:'b2',
	          list3:'c3',
	        },
	        {
	          list1:'A1',
	          list2:'b2',
	          list3:'c3',
	        },
	        {
	          list1:'A1',
	          list2:'b2',
	          list3:'c3',
	        },
	        {
	          list1:'A1',
	          list2:'b2',
	          list3:'c3',
	        },
	      ],
	      columns:[
	        {
	          title:'列表1',
	          key:'list1'
	        },
	        {
	          title:'列表2',
	          key:'list2'
	        },
	        {
	          title:'列表3',
	          key:'list3'
	        },
	      ]
    }
  }

方法代码

methods:{
    onexcel(){
      const { export_json_to_excel } = require('../excle/Export2Excel');  // 将生成excel的Export2Excel.js引入

      let title = ['列表1', '列表2', '列表3'];  // 这里是excel表格的表头
      let key = [ 'list1', 'list2', 'list3']; // 设置生成列的数据属性
      function formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }

      export_json_to_excel( title, formatJson( key, this.data), '列表数据') // 调用生成方法
    }
  }

这里需要注意引入的 export_json_to_excel这个名字不能更换
this.data就是数据数组对象

这样就完成了下面附上完整代码

项目文件结构

我是在Vue生成的HelloWorld.vue里面写的

完整代码

<template>
  <div>
    <Table :data="data" :columns="columns"></Table>
    <Button long type="success" style="margin-top:10px;" @click="onexcel">生成报表</Button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data:[
        {
          list1:'A1',
          list2:'b2',
          list3:'c3',
        },
        {
          list1:'A1',
          list2:'b2',
          list3:'c3',
        },
        {
          list1:'A1',
          list2:'b2',
          list3:'c3',
        },
        {
          list1:'A1',
          list2:'b2',
          list3:'c3',
        },
      ],
      columns:[
        {
          title:'列表1',
          key:'list1'
        },
        {
          title:'列表2',
          key:'list2'
        },
        {
          title:'列表3',
          key:'list3'
        },
      ]
    }
  },
  methods:{
    onexcel(){
      const { export_json_to_excel } = require('../excle/Export2Excel');  // 将生成excel的Export2Excel.js引入

      let title = ['列表1', '列表2', '列表3'];  // 这里是excel表格的表头
      let key = [ 'list1', 'list2', 'list3']; // 设置生成列的数据属性
      function formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      }

      export_json_to_excel( title, formatJson( key, this.data), '列表数据') // 调用生成方法
    }
  }
}
</script>