在vue中把数据导出Excel文件

@TOC

第一次尝试写文章 在vue中把数据导出成Excel格式的文件，话不多，上代码：

1. 第一步我们要先安装几个集成的插件

npm install -S file-saver xlsx
npm install -D script-loader
npm install -S xlsx-style

第三个插件，稍后在介绍 2. 你需要在你的src的目录下面加一个excel的文件夹，在excel的文件里面新建一个Export2Excel.js的文件。 如图下 3. Export2Excel.js的内容 百度网盘链接 如下： pan.baidu.com/s/121a1AEtL… 提取码：HGDY 4.下面该到了写代码的部分了，代码奉上：

export default {
	data() {
		return: {
			tableData: [
		        {'index':'0',"nickName": "心中一点浩然气", "name": "小明"},
		        {'index':'1',"nickName": "天地千里快哉风", "name": "小红"},
		        {'index':'2',"nickName": "吾善养浩然气", "name": "小兰"}
		      ]
		}
	},
	created() {
		this.Export2Excel(this.tableData)
	},
	methods: {
		Export2Excel(dataList) {
			// 这个引入路径就是你刚才创建的那个文件
            import('../../excel/Export2Excel2').then(excel => {
            const tHeader = ['序号', '签名', '姓名']
            const title = ['', '', '']; // 这个title和上面数组的数量必须是一致的但是可以是空的
            // 表头对应字段
            const filterVal =['index', 'nickName', 'name'];
            const list = dataList
            const data = this.formatJson(filterVal, list)
                data.map(item => {
                    // console.log(item)
                    item.map((i, index) => {
                    if (!i) {
                        item[index] = ''
                    }
                    })
                })
                // const merges = ['A1:I1'] //合并单元格
                excel.export_json_to_excel({
                    title: title,
                    header: tHeader,
                    data,
                    // merges,
                    filename: '导出的数据',
                    autoWidth: true,
                    bookType: 'xlsx'
                })
            })
        },
        formatJson(filterVal, jsonData) { // 数据转换
            return jsonData.map(v => filterVal.map(j => v[j]))
        }
	}
}

5. 现在让我们来说一下上面我吗下载的第三个插件是干什么用的，这个插件是让我们把导出excel的文件改的好看一点，当然这个也得自己去用代码写样式下面给大家推荐一个修改xlsx-styke修改样式的文章。 www.cnblogs.com/yinxingen/p…
6. 最后就这样吧。