前端js 下载xls表格 | 我是大潘呀

面对需求，脑海中最先涌现出的是两个方向来实现

由后端把xls表格制作出来，然后前端只需点击 a标签即可完成下载
前端将页面数据或者 json数据稍作处理，制作成 .xls文件，然后导出

刚开始感觉，第一种方法实现起来或许更加顺手，但是考虑到后期服务器可能存在的压力，为了分散服务端压力，所以将这个功能交给浏览器来完成，使用第2种方法来实现

此处借鉴了这个大神的文章，感谢 js 实现纯前端将数据导出excel两种方式，亲测有效

‘
’
‘
’
下边代码实现的是将用于展示页面的 json数据，重复利用，转换成base64数据用于下载

function pageToExcel(jsonData){  //参数 jsonData 是从后端接收的接送数据：包含xls文件中所有要保存的数据
			// str 是xls文件内表格的标题
          let str = '<tr><td>序号</td><td>位置排名</td><td>图URL</td><td>标题</td><td>是否天猫</td><td>价格</td><td>销量</td><td>收获量</td><td>店铺</td><td>DSR</td><td>信用</td><td>发货地</td></tr>';
          for(let i = 0 ; i < jsonData.length ; i++ ){

              var goods = jsonData[i].goods;  //由于jsonData 内部有的元素是字典，所以提前转换

              var shop = jsonData[i].shop;

              var seller = jsonData[i].seller;

              var order = "第"+jsonData[i]['page_order']+"页 总排名：" + jsonData[i]['rank_order'];

              var DSR = "服务" +shop.dsr.service+ "描述"+shop.dsr.description+"物流"+shop.dsr.delivery;
              var num = i + 1;  //序号
				// str_ 行数据模板
              let str_ = '<tr><td>'+num+'</td><td>'+order+'</td><td>'+goods.picSrc+'</td><td>'+goods.title+'</td><td>'+goods.is_tmall+'</td><td>'+goods.price+'</td><td>'+goods.sales_count+'</td><td>'+goods.confirm_sales_count+'</td><td>'+shop.name+'</td><td>'+DSR+'</td><td>'+seller.sellerCredit+'</td><td>'+goods.shop_location+'</td></tr>';
              str += str_;
          }
          //Worksheet名
          let worksheet = 'Sheet1';
          // let uri = 'data:application/vnd.ms-excel;base64,';
          let uri = 'data:application/vnd.ms-excel;base64,';

          //下载的表格模板数据
          let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
          xmlns:x="urn:schemas-microsoft-com:office:excel"
          xmlns="http://www.w3.org/TR/REC-html40">
          <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
            <x:Name>${worksheet}</x:Name>
            <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
            </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
            </head><body><table>${str}</table></body></html>`;
          //下载模板
          var query  = document.getElementById('tb_search_key').value;
          var a = document.createElement("a");  //为了给xls文件命名，重新创建一个a元素
          a.href = uri + base64(template);  // 给a元素设置 href属性
          a.download =query + '.xls';   // 给a元素设置下载名称
          a.click();  // 点击a标签 下载文件
        }

//输出base64编码
function base64 (s) { return window.btoa(unescape(encodeURIComponent(s))) }

这是结合自己项目中实际情况的代码，可以根据自己的实际应用场景，稍加修改
自己做个记录，希望能帮到你

下边是自己找的demo

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        /* 此样式仅用于浏览器页面效果，Excel不会分离表格边框，不需要此样式 */
        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <!-- 设置border="1"以显示表格框线 -->
    <table border="1">
        <!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->
        <caption>学生成绩表</caption>
        <tr>
            <!-- 可以使用rowspan和colspan来合并单元格 -->
            <th rowspan="2">编号</th>
            <th rowspan="2">学号</th>
            <th rowspan="2">姓名</th>
            <th rowspan="2">性别</th>
            <th rowspan="2">年龄</th>
            <th colspan="3">成绩</th>
        </tr>
        <tr>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2016001</td>
            <td>张三</td>
            <td>男</td>
            <td>13</td>
            <td>85</td>
            <td>94</td>
            <td>77</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2016002</td>
            <td>李四</td>
            <td>女</td>
            <td>12</td>
            <td>96</td>
            <td>84</td>
            <td>89</td>
        </tr>
    </table>

    <a>导出表格</a>

    <script>
        // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
        var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
        // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
        var blob = new Blob([html], { type: "application/vnd.ms-excel" });
        var a = document.getElementsByTagName("a")[0];
        // 利用URL.createObjectURL()方法为a元素生成blob URL
        a.href = URL.createObjectURL(blob);
        // 设置文件名
        a.download = "学生成绩表.xls";
    </script>
</body>
</html>