依赖下载

npm install xlsx -S 
npm install xlsx-style -S 
npm install file-saver -S 

utlis 创建下载方法

import XLSX from "xlsx";
import XLSXStyle from "xlsx-style";
import FileSaver from "file-saver";export default {/**** @param elt* @param sheetName* @param fileName 导出的文件名* @param titleNum  标题行数*/exportTable(elt,sheetName,fileName,titleNum){let wb = XLSX.utils.table_to_book(elt, { sheet: sheetName, raw: true });let range = XLSX.utils.decode_range(wb.Sheets[sheetName]['!ref']);//单元格边框样式let borderStyle = {top: {style: "thin",color: { rgb: "000000" }},bottom: {style: "thin",color: { rgb: "000000" }},left: {style: "thin",color: { rgb: "000000" }},right: {style: "thin",color: { rgb: "000000" }}};let cWidth = [];for (let C = range.s.c; C < range.e.c; ++C) {   //SHEET列let len = 100; //默认列宽let len_max = 400; //最大列宽for (let R = range.s.r; R <= range.e.r; ++R) {  //SHEET行let cell = { c: C, r: R };                    //二维 列行确定一个单元格let cell_ref = XLSX.utils.encode_cell(cell);  //单元格 A1、A2if(wb.Sheets[sheetName][cell_ref]){// if (R == 0){if (R < titleNum){wb.Sheets[sheetName][cell_ref].s = {  //设置第一行单元格的样式 stylefont:{sz:15,color:{rgb:'060B0E'},bold:false},alignment:{horizontal:'center',vertical:'center',},fill:{fgColor:{rgb:'E4E4E4'},},border: borderStyle,//用上面定义好的边框样式};}else {wb.Sheets[sheetName][cell_ref].s = {alignment:{horizontal:'left',vertical:'center',},border: borderStyle,//用上面定义好的边框样式};}//动态自适应：计算列宽let va = JSON.parse(JSON.stringify(wb.Sheets[sheetName][cell_ref].v));var card1 = JSON.parse(JSON.stringify(va)).match(/[\u4e00-\u9fa5]/g); //匹配中文var card11 = "";if (card1){card11 = card1.join("")}var card2 = JSON.parse(JSON.stringify(va)).replace(/([^\u0000-\u00FF])/g,"");  //剔除中文let st = 0;if (card11){// st += card11.length * 16  //中文字节码长度st += card11.length * 20  //中文字节码长度}if (card2){// st += card2.length * 8  //非中文字节码长度st += card2.length * 10  //非中文字节码长度}if (st > len){len = st;}}}if (len > len_max){//最大宽度len = len_max;}cWidth.push({'wpx':len});     //列宽}wb.Sheets[sheetName]['!cols'] = cWidth;var wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };var wbout = XLSXStyle.write(wb, wopts); //一定要用XLSXStyle不要用XLSX，XLSX是没有格式的！FileSaver(new Blob([this.s2ab(wbout)], { type: "" }), fileName + '.xlsx');},s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;},}

基于element table 代码示例

<template><div><el-table:data="tableData1"borderref="tables"id="tables"style="width: 100%"><el-table-column:formatter="dateFormat"prop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="sax"label="性别"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column></el-table><button @click="exportData">导出222</button></div>
</template><el-table:data="tableData1"borderref="tables"id="tables"style="width: 100%"
><el-table-column:formatter="dateFormat"prop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="sax"label="性别"></el-table-column><el-table-columnprop="age"label="年龄"></el-table-column>
</el-table><button @click="exportData">导出222</button>

<script>import exportTableUtil from '@/utils/exportTableUtil.js'export default {data (){return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',sax:'男',age:18},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',sax:'男',age:18}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',sax:'男',age:18}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',sax:'男',age:18}],},methods:{exportData(){let elt = document.getElementById("tables");exportTableUtil.exportTable(elt,"name","name",1);},}}
<script>