vue把数据导出为Excel表格的方法

vue把数据导出为Excel表格的方法

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

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

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

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

//xlsx安装命令
npm i xlsx

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

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

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

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

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"] //结
  

//使用测试
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]
    ]
  })
		}
	}  
}

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

姓名	年龄
tom	12
jerry	13

亲测有效，快点试试吧！