Vue学习笔记:将数组数据使用Excel表格导出
Vue学习笔记:将数组数据使用Excel表格导出需求:数组数据使用 Excel导出第一步:下载依赖命令行: npm i xlsx第二步:建立下载公共jssrc下建立文件夹utils后建立data2Excel.js第三步:将公共js导入页面import { dataConversionUtil } from '@/utils/data2Excel'第四步:数组数据组装Excel表格 表头loadEx
·
Vue学习笔记:将数组数据使用Excel表格导出
需求:数组数据使用 Excel导出
第一步:下载依赖
命令行: npm i xlsx
第二步:建立下载公共js
src下建立文件夹utils后建立data2Excel.js
第三步:将公共js导入页面
import { dataConversionUtil } from '@/utils/data2Excel'
第四步:数组数据组装Excel表格 表头
loadExcel(){
var data = [
{name:'阿三',sex:"男",age:'24'},
{name:'阿梅',sex:"女",age:'16'}
]
var tableHeader = [
[ '序号','姓名','性别','年龄'],
]
var dataList = []
data.forEach((item,index) => {
dataList.push([ index+1, item.name,item.sex,item.age]);
})
dataConversionUtil.dataToExcel('人员', tableHeader, dataList)
this.$message.success('导出成功!');
}
查看效果
数组数据:
excel表格
以上是导出Excel表格的步骤哦,纯属个人工作学习小记,如有欠缺,欢迎指教!!!
源代码:::
data2Excel.js
import XLSX from "xlsx";
// 对象,用于调用方法
var dataConversionUtil = {};
// 将数据转换成Excel,单个sheet保存
//fileName文件名,tableHeader表头,dataList表数据,sheet="sheet1"工作表默认名字是sheet1
dataConversionUtil.dataToExcel = function(fileName,tableHeader,dataList,sheet="sheet1"){
// excel的表头和数据
let aoa = [];
// aoa的数据格式:[[],[],[],[]] 数组的第一个子数组可以指定为表头 根据情况而定
aoa = tableHeader.concat(dataList);
let workSheet = XLSX.utils.aoa_to_sheet(aoa);
let workBook = XLSX.utils.book_new();
// 把数据写到工作簿中
XLSX.utils.book_append_sheet(workBook,workSheet,sheet)
//如果一个工作工作簿中有多个工作表,可以修改参数类型并遍历添加,期中workBook是同一个,workSheet和sheet根据自己的需求添加,
//比如在此处添加第二个工作表叫‘第二张表’,把数据封装好后,数据格式同上,假如数据叫workSheet2,执行下面代码,工作簿就会多一张工作表叫‘第二张表’
//XLSX.utils.book_append_sheet(workBook,workSheet2,'第二张表')
//保存
XLSX.writeFile(workBook, fileName + ".xlsx")
}
export { dataConversionUtil }
Excel.vue
<template>
<!-- npm i xlsx-->
<el-button @click="loadExcel">下载Excel</el-button>
</template>
<script>
import { dataConversionUtil } from '@/utils/data2Excel'
export default {
name: "Excel",
data: function () {
return {}
},
methods: {
loadExcel(){
var data = [
{name:'阿三',sex:"男",age:'24'},
{name:'阿梅',sex:"女",age:'16'}
]
var tableHeader = [
[ '序号','姓名','性别','年龄'],
]
var dataList = []
data.forEach((item,index) => {
dataList.push([ index+1, item.name,item.sex,item.age]);
})
dataConversionUtil.dataToExcel('人员', tableHeader, dataList)
this.$message.success('导出成功!');
}
}
}
</script>
<style lang="scss" scoped>
</style>
感兴趣的朋友可以直接引用Vue项目实际体验一下哦!!!
欢迎有学之士一起交流学习,进行技术探讨!!私聊我哦!!!
更多推荐
已为社区贡献9条内容
所有评论(0)