软件系统定制开发vue把数据导出为Excel表格的方法

vue软件系统定制开发把数据导出为Excel软件系统定制开发表格的方法

软件系统定制开发由于项目中要用到把数据导出为Excel的需求，自己用完之后做一个小结，这是比较简单的使用方法，主要用到export2Excel、和xlsx的的插件，以下是实现的步骤：

1.创建一个vue实例，并在vue实例中创建一个按钮，用来测试导出功能

 <el-button size="small" type="Pprimary" @click="exportToExcel">导出</el-button>
1

2.用export2Excel.js文件（百度搜索），配合file-saver文件（file-saver在gitee搜索肖嘉腾版的）,并且需要安装xlsx插件

//xlsx安装命令npm i xlsx
1
2

3.在export2Excel.js引入file-saver文件中的和xlsx插件

import { saveAs } from '@/utils/FileSaver.min.js'import * as XLSX from 'xlsx'
1
2

4.在需要文件导出的vue实例引入export2Excel.js的export_json_to_excel 方法

import { export_json_to_excel } from '@/utils/Export2Excel'
1

5.export_json_to_excel 需要的数据有header和data，我们只是简单的测试，所以把需要的数据定义成这两个参数即可（其他参数需要可以自行设置）；export_json_to_excel 方法是将一段 json 数据对象导出成 excel ，当然还有将一个原生table表格导出成 excel方法是export_table_to_excel ；

• object.keys（）方法是获取对象的键（‘姓名’: 'username’中的姓名）,返回的是一个数组

  //object.keys（）方法举例：const object1 = {  a: 'somestring',  b: 42,  c: false};console.log(Object.keys(object1));// expected output: Array ["a", "b", "c"] //结
  1
  2
  3
  4
  5
  6
  7
  8
  9

//使用测试export default {    method：{    exportToExcel（）{//通过数据枚举的方法，把表头和data定义好，下面这些方法可以把表头的英文名数据转换为中文名const testData = {        '日期': 'time',        '手机号': 'mobile',        '姓名': 'username'      }      const header = Object.keys(testData)      const data = res.rows.map(user => {        const userArr = []        for (const key in testData) {          const newKey = testData[key]          userArr.push(user[newKey])        }        return userArr      })//把定义好的header和data放进export_json_to_excel的函数里作为参数   export_json_to_excel({    header,    data  })//提供一个简单的测试数据，测试时注意要把上面数据注释掉  export_json_to_excel({    header: ['姓名', '年龄'],    data: [      ['tom', 12],      ['jerry', 13]    ]  })		}	}  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

• 这是测试数据打印出来的内容

姓名	年龄
tom	12
jerry	13

亲测有效，快点试试吧！