方法一、vue+js-xlsx

1.vue项目内安装两个依赖：xlsx、file-saver
 npm install xlsx --save
 npm install file-saver --save
2.组件中引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
3.组件代码

定义一个按钮来触发导出事件；
使用elementUI的表格格式，<el-table>要定义一个id:table-content；
写两个方法实现导出功能 exportToExcel()、printContent()）

<template>
  <el-button @click="exportToExcel">导出Excel</el-button>

  <el-table  :data="tableData3"  style="width: 100%" id="table-content">
    <el-table-column  prop="date"  label="日期"  width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column  prop="name"  label="姓名"  width="120">
      </el-table-column>
      <el-table-column label="地址">
        <el-table-column  prop="province"  label="省份"  width="120">
        </el-table-column>
        <el-table-column  prop="city"  label="市区"  width="120">
        </el-table-column>
        <el-table-column  prop="address"  label="地址"  width="300">
        </el-table-column>
        <el-table-column  prop="zip" label="邮编"  width="120">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    },methods:{
exportToExcel () {
    let et = XLSX.utils.table_to_book(document.getElementById('table-content')); 
    //document.getElementById('xxxx'):XXX此处传入table的DOM节点，即el-table的id名称
    let etout = XLSX.write(et, {
        bookType: 'xlsx', 
        bookSST: true, 
        type: 'array' 
    });
    try {
        FileSaver.saveAs(new Blob([etout], { 
            type: 'application/octet-stream' 
        }), 'table.xlsx');   //XXX.xlsx 为导出的文件名
    } catch (e) {
        console.log(e, etout) ;
    }
    return etout;
},
//打印页面内容
printContent(){
    let wpt = document.getElementById('table-content');
    let newContent = wpt.innerHTML;
    let oldContent = document.body.innerHTML;
    document.body.innerHTML = newContent;
    window.print(); //打印方法
    window.localtion.reload();
    document.body.innerHTML = oldContent;
}
}
  }
</script>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

  export default {
    data() {
      return {
        tableData3: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    },methods:{
exportToExcel () {
    let et = XLSX.utils.table_to_book(document.getElementById('table-content')); 
    //document.getElementById('xxxx'):XXX此处传入table的DOM节点，即el-table的id名称
    let etout = XLSX.write(et, {
        bookType: 'xlsx', 
        bookSST: true, 
        type: 'array' 
    });
    try {
        FileSaver.saveAs(new Blob([etout], { 
            type: 'application/octet-stream' 
        }), 'table.xlsx');   //XXX.xlsx 为导出的文件名
    } catch (e) {
        console.log(e, etout) ;
    }
    return etout;
},
//打印页面内容
printContent(){
    let wpt = document.getElementById('table-content');
    let newContent = wpt.innerHTML;
    let oldContent = document.body.innerHTML;
    document.body.innerHTML = newContent;
    window.print(); //打印方法
    window.localtion.reload();
    document.body.innerHTML = oldContent;
}
}
  }
</script>

·效果：样式普通，若增加样式需要手写样式文件及插件，导入引用，后期修改麻烦。

方法二、node.js+ejsExcel

1.git下载插件代码

https://github.com/sail-sail/ejsExcel
http://git.oschina.net/ccteams/ejsExcel

2.安装模块依赖

npm install ejsexcel

3.执行 test/test.bat

·效果：先做好excel模板，然后往模板中填充数据，生成后下载。后期模板修改比较方便，直接修改模板excel就可以。

附上该模块作者信息（作者人很nice，有问题在Q群中提问，都会很及时解答）：

Auto: Sail 黄智勇

QQ：151263555

Q群：470988427

Email：151263555@qq.com

CSDN原文：https://blog.csdn.net/f1gh151263/article/details/51740705

segmentfault社区详细文档：https://segmentfault.com/a/1190000012992783

方法三、基于jQuery的table2excel

1.下载相关插件

jquery-3.3.1.min.js、jquery.table2excel.js

2.HTML引用js文件(D2Admin框架中的引用插件路径：..\Marketregulation\public\index.html)

并将文件放到对应路径下

<script src="./../jquery-3.3.1.min.js"></script>

<script src="./../jquery.table2excel.js"></script>

3.组件内：

• 定义一个按钮来触发导出事件；
• 使用elementUI的表格格式，<el-table>要定义一个id:table-content；
• 在js中写exportToExcel()方法实现导出功能 

methods:{
exportToExcel(){
$("#tblExport").table2excel({
exclude : ".noExl", //过滤位置的 css 类名
filename : "导出excel表-" + new Date().getTime() + ".xls" //文件名称
});
}
}

4.若想修改导出的excel样式设置，直接修改jquery.table2excel.js脚本文件即可

找到脚本的mid: 加入样式代码'<style type="text/css"> ... </style>'