点击页面按钮以excel保存到本地

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .receive table{
      width: 600px;
    }
    .receive table th,.receive table td{
      width: 140px;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
    button{
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: pink;
      color: #fff;
      border-radius: 6px;
      outline: none;
      border: none;
    }
  </style>
</head>
<body>
  <button>保存至本地</button>
  <div class="receive">
    <table id="table">
      <tr>
        <th>单位</th>
        <th>支部</th>
        <th>姓名</th>
        <th>手机号</th>
      </tr>
      <tr>
        <td>小虎豹</td>
        <td>支部名称1</td>
        <td>姓名1</td>
        <td>18463580322</td>
      </tr>
      <tr>
        <td>单位名称2</td>
        <td>支部名称2</td>
        <td>姓名2</td>
        <td>18463587551</td>
      </tr>
      <tr>
        <td>单位名称3</td>
        <td>支部名称3</td>
        <td>姓名3</td>
        <td>18712830270</td>
      </tr>
      <tr>
        <td>单位名称4</td>
        <td>支部名称4</td>
        <td>姓名4</td>
        <td>18712830270</td>
      </tr>
      <tr>
        <td>单位名称5</td>
        <td>支部名称5</td>
        <td>姓名5</td>
        <td>18712830270</td>
      </tr>
      <tr>
        <td>单位名称3</td>
        <td>支部名称3</td>
        <td>姓名3</td>
        <td>18712830270</td>
      </tr>
      <tr>
        <td>单位名称4</td>
        <td>支部名称4</td>
        <td>姓名4</td>
        <td>18712830270</td>
      </tr>
      <tr>
        <td>单位名称5</td>
        <td>支部名称5</td>
        <td>姓名5</td>
        <td>18712830270</td>
      </tr>
    </table>
  </div>
  <script src="excel.js"></script>
  <script>
    var btn=document.getElementsByTagName('button')[0];
    btn.onclick=function(){
      exportExcel('table','党员领取详情');
    }
  </script>
</body>
</html>

function inArray(target, arr) {   // 不适用于引用数据类型
  return arr.some(function(elem, index) {
    if (target === elem) {
      return true;
    }
  })
}
// row ,line : array, 不需要数据的行列值，0或undefined为全选
function exportExcel(tableID,fileName,row,line){
    var agent = navigator.userAgent.toLowerCase();
    var isIE = /(msies|trident.*rv:)([w.]+)/.test(agent);

    if (isIE) {
        alert("暂不支持IE内核的浏览器");
    } else {
        var table = document.getElementById(tableID);
        var oTh = table.getElementsByTagName('th');
        var data = [];
        data[0] = [];
        for(var i = 0; i < oTh.length; i++) {        // 标题th强制导出
            if(line && inArray(i, line)) {
                continue;
            }
            data[0].push(oTh[i].innerHTML)
        }
        var oTr = table.getElementsByTagName('tr');
        for(var i = 1; i < oTr.length; i++) {
            if(row && inArray(i,row)) {
                continue;
            }
            var arr = [];
            var oTd = oTr[i].getElementsByTagName('td');
            for (var j = 0; j < oTd.length; j++) {
                if(line && inArray(j, line)) {
                    continue;
                }
                arr.push(oTd[j].innerHTML.replace('
',' '));
            }
            data.push(arr);
        }
        var str = '';
        data.forEach(function(arr, index){
            str += arr.toString() + '
';
        })

        str =  encodeURIComponent(str);         //解决换行符无法识别问题
        var url = 'data:text/txt;charset=utf-8,ufeff'+ str;
        var downloadLink = document.createElement("a");
        downloadLink.href = url;
        downloadLink.download = fileName+".csv";
        document.body.appendChild(downloadLink);
        downloadLink.click();
        downloadLink.remove();
    }
}