js表格直接导出excel

it2026-01-31  2

XLSX.js

<template> <div class="about"> <el-button type="success" @click="excel1" icon="el-icon-upload2" >data导出</el-button> <el-table :data="tableData" id="out_table2" border style="width:100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="sex" label="性别"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </div> </template> <script> // @ is an alias to /src import XLSX from 'xlsx' export default { name: 'Home', data(){ return { tableData:[ {name:"yangj",age:22,sex:"男"}, {name:"骏驰",age:54,sex:"女"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, {name:"狗多",age:12,sex:"男"}, ], queryInfo:{ pageSize:10, pageCurrent:1 } } }, components: { }, methods:{ // 数据data导出 () excel1(){ //创建book var wb = XLSX.utils.book_new(); //json转sheet var ws = XLSX.utils.json_to_sheet(this.tableData, {header:["name","age","sex"], skipHeader:false}); //设置列宽 ws['!cols']= [ {width: 15}, {width: 15}, {width: 15}, {width: 15}, {width: 10} ]; var timestamp = (new Date()).getTime(); //sheet写入book XLSX.utils.book_append_sheet(wb, ws, "file"); //输出 XLSX.writeFile(wb,"file"+timestamp+".xlsx"); } } } </script>
最新回复(0)