原生js实现

方式一

function exportExcel(str=`姓名,电话,邮箱n`, jsonData){

    // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
    // let str = `姓名,电话,邮箱n`;

    // 增加t为了不让表格显示科学计数法或者其他格式
    for(let i = 0 ; i < jsonData.length ; i++ ){
        for(const key in jsonData[i]){
            str+=`${jsonData[i][key] + 't'},`;
        }
        str+='n';
    }
    // encodeURIComponent解决中文乱码
    const uri = 'data:text/csv;charset=utf-8,ufeff' + encodeURIComponent(str);
    // 通过创建a标签实现
    const link = document.createElement("a");
    link.href = uri;
    // 对下载的文件命名
    link.download =  "data.csv";
    link.click()
}

const jsonData = [
    {
        name: '路人甲',
        phone: '123456789',
        email: '000@123456.com'
    },
    {
        name: '炮灰乙',
        phone: '123456789',
        email: '000@123456.com'
    },
    {
        name: '土匪丙',
        phone: '123456789',
        email: '000@123456.com'
    },
    {
        name: '流氓丁',
        phone: '123456789',
        email: '000@123456.com'
    },
]

let str = `姓名,电话,邮箱n`

exportExcel(str, jsonData)

方式二

创建一个dom表格，可以添加样式

<table id="table" style="position: fixed;left: -10000px;">
  <tr>
    <th>序号</th>
    <th>名称</th>
    <th style="width:200px">年龄</th>
  </tr>
  <tr v-for="(item,index) in jsonData">
    <td>{{item.order}}</td>
    <td>{{item.name}}</td>
    <td>{{item.age}}</td>
  </tr>
</table>

获取到表格节点，生成dom节点树，生成blob对象

exportExcel() {
    let oHtml = document.getElementById('table').outerHTML
    let excelHtml = `
        <html>
        <head>
            <meta charset='utf-8' />
            <style>
                table{
                    min-width: calc(100vw - 290px);
                    /*margin-top: 50px;*/
                    border-collapse: collapse;
                    border-spacing: 0;
                    border: 1px #eee solid;
                    border-radius: 50px;
                }
                table tr{
                    height:50px;
                    border: 1px #eee solid;
                    white-space: nowrap;
                }
                table tr th{
                    border: 1px #eee solid;
                    background-color: #e1f0fe;
                }
                table tr td{
                    border: 1px #eee solid;
                    white-space: nowrap;
                    padding: 30px 20px;
                    text-align: center;
                }
            </style>
        </head>
        <body>
        ${oHtml}
        </body>
        </html> `;
    // 生成blob对象
    let excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'})
    // 创建一个a标签
    let oA = document.createElement('a');
    // 利用URL.createObjectURL()方法为a元素生成blob URL
    oA.href = URL.createObjectURL(excelBlob);
    // 给文件命名
    oA.download = `${new Date().toLocaleString()}_提现数据表_${this.jsonData.length}条.xlsx`;x
    // 模拟点击
    oA.click();
}

但是上面实现的导出功能总是有很多bug，尤其是在表格字段中有非法字符的时候，导出表格的效果也不尽人意，我复制粘贴工程师永不自己造轮子，还是用别人开发好的库吧。

导入js-export-excel库

# 标签引入 
<script src="https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js"></script>

# npm安装
npm install -save js-export-excel

js导出excel

option

fileName 下载文件名(默认：download)
saveAsBlob 导出文件流(默认：false)

datas 数据

/*多个sheet*/
/*每个sheet为一个object */
[{
    sheetData:[], // 数据
    sheetName:'', // sheet名字
    sheetFilter:[], //列过滤
    sheetHeader:[] // 第一行
    columnWidths: [] //列宽 需与列顺序对应
}]

sheet option

sheetName sheet 名字(可有可无)(默认 sheet1)
sheetHeader 标题（excel 第一行数据）
```
sheetHeader: ["第一列", "第二列"];
```

columnWidths 列宽非必须

// number 屏幕宽度为100 20即为 1/5屏幕大小
columnWidths = [20, ""];

sheetData 数据源(必须)

支持超链接解析，格式为 “hyperlink:site url”。eg：hyperlink:https://www.baidu.com

<!--两种形式-->
<!--第一种 object-->
[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}]
<!--第二种 arrary-->
[['一行一列','一行二列'],['二行一列','二行二列']]

sheetFilter 列过滤(只有在 data 为 object 下起作用)(可有可无)
```
sheetFilter = ["two", "one"];
```

使用方式

例1

import ExportJsonExcel from "js-export-excel";

let option={};
option.fileName = 'excel' //文件名
option.datas=[
  {
   //第一个sheet（第一个excel表格）
    sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}],//数据
    sheetName:'sheet',
    sheetFilter:['two','one'],   //表头数据对应的sheetData数据
    sheetHeader:['第一列','第二列'],  //表头数据
    columnWidths: ['8','4'], // 列宽
  },
  {
    //第二个sheet（第二个excel）
    sheetData:[{one:'一行一列',two:'一行二列'},{one:'二行一列',two:'二行二列'}]
  }
];
let toExcel=new jsExportExcel(option);
toExcel.saveExcel();

例2

// 导出Blob，支持压缩等其他操作
const ExportJsonExcel = require("js-export-excel");
const JSZip = require("jszip");
 
var option = {};
 
option.fileName = "excel";
 
option.saveAsBlob = true;
 
option.datas = [
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
    sheetName: "sheet",
    sheetFilter: ["two", "one"],
    sheetHeader: ["第一列", "第二列"],
    columnWidths: [20, 20],
  },
  {
    sheetData: [
      { one: "一行一列", two: "一行二列" },
      { one: "二行一列", two: "二行二列" },
    ],
  },
];
 
var toExcel = new ExportJsonExcel(option); //new
 
let file = toExcel.saveExcel();
 
// 压缩文件
var zip = new JSZip();
 
// 多个excel 依次加入(fileName不能相同)
zip.file(file.name, file);
 
zip.generateAsync({ type: "blob" }).then(function (content) {
  // see FileSaver.js
  saveAs(content, "example.zip"); // 下载文件
});