vue生成excel文件

Vue生成Excel文件

一、导入Blob.js和Export2Excel.js文件

import Blob from './excel/Blob'
import Export from './excel/Export2Excel'

或者是通过js代码动态导入

const { export_json_to_excel } = require('../../../excel/Export2Excel')

二、设置一个简单的控件来触发

<template>
    <el-button type="primary"  @click="export2Excel()">导出Excel</el-button>
</template>

这里引入了一个Element-UI 的组件

三、设置初始数据

dataList: [
    {'username':'小明','phone':'123456','gender':'男','age':'8'},
    {'username':'小红','phone':'123456','gender':'男','age':'8'},
    {'username':'小丽','phone':'123456','gender':'男','age':'8'},
]

四、写方法做测试

export2Excel () {
    require.ensure([], () => {
        const { export_json_to_excel } = require('../../../excel/Export2Excel')
        // 设置Excel的表格第一行的标题
        const tHeader = ['用户名', '电话', '性别', '年龄']
        // 把data里的tableData存到list
        const list = this.dataList
        // 获取时间戳给文件命名
        const fileDate = new Date().getTime()
        // 导出Excel 文件名
        export_json_to_excel(tHeader, list, '超时订单' + fileDate)
    })
},