使用JS导出页面内容到Excel

方案一：

• JS代码

  <script>
      $(function(){
          //使用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.getElementsByClassName('export')[0];
  
          // 利用URL.createObjectURL()方法为a元素生成blob URL
          a.href = URL.createObjectURL(blob);
          // 设置文件名
  
          a.download = "导出测试表.xls";
      })
  

  </script>

• 导出按钮

  <a href="" class="export" style="text-decoration: none;display: inline-block;width: 100%;">导出详情表</a>

 方案二：使用SheetJS插件进行下载

• 　github地址：https://github.com/SheetJS/sheetjs
•     代码示例

　　

<script src="/web/res/jquery/jquery-1.10.2.min.js"></script>
<script src="/web/res/sheetjs/xlsx.core.min.js"></script>

<button type="button" class="btn btn-primary analysis-btn"onclick="toExcel();">导出</button>
<script>
            // 导出功能
            function toExcel(){
                var blob = sheet2blob(XLSX.utils.table_to_sheet($('#order-data-table')[0]));
                // 设置链接
                var link = window.URL.createObjectURL(blob);
                var a = document.createElement("a");// 创建a标签

                var levelType = $("#level-type").val();
                var city = $("#city").find('option:selected').text();
                var district = $("#district").find('option:selected').text();
                var grid = $("#grid").find('option:selected').text();

                var fileName = '测试导出示例';

                a.download = fileName;// 设置被下载的超链接目标（文件名）
                a.href = link;//设置a标签的链接
                document.body.appendChild(a);// a标签添加到页面
                a.click();// 设置a标签触发单击事件
                document.body.removeChild(a);// 移除a标签
            }


            // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
            function sheet2blob(sheet, sheetName) {
                sheetName = sheetName || 'sheet1';
                var workbook = {
                    SheetNames: [sheetName],
                    Sheets: {}
                };
                workbook.Sheets[sheetName] = sheet;
                // 生成excel的配置项
                var wopts = {
                    bookType: 'xlsx', // 要生成的文件类型
                    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
                    type: 'binary'
                };
                var wbout = XLSX.write(workbook, wopts);
                var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
                // 字符串转ArrayBuffer
                function 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;
                }
                return blob;
            }
        </script>