zoukankan      html  css  js  c++  java
  • 非table结构数据导入excel

    现在大部分的数据都是ul li 展示,一下提供方法

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    ul{
    overflow: hidden;
    }
    li{
    60px;
    height: 30px;
    text-align: center;
    float: left;
    list-style: none;
    }
    </style>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/JsExcelXml.js"></script>
    <script>
    //导出数据到excel文件

    function exportExcel()
    {
    var columnsInfo = [];//列设置
    var data = [];//数据
    $("#grid").find("li").each(function(i) {
    var text = $(this).text();
    var column = { field: text, title: text};
    columnsInfo.push(column);

    });
    $("#app").find("ul").each(function(i) {
    var dataObj = new Object();
    $(this).find("li").each(function(j) {
    var text = $(this).text();
    var column = columnsInfo[j];
    dataObj[column.field] = text;
    });
    data.push(dataObj);
    });
    //导出excel设置

    var opts = {
    HeadInfo: [columnsInfo],
    RowInfo: data,
    FooterInfo: null,
    MergeCells: null,
    CellStyles: null,
    MainTitle: { Displayname: '', Alignment: 'Center', BgColor: '#FFFFFF', FontSize: 16, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
    SecondTitle: { Displayname: '', Alignment: 'Left', BgColor: '#FFFFFF', FontSize: 14, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
    HeadStyle: { Alignment: 'Center', BgColor: '#D8D8D8', FontSize: 12, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
    DataStyle: { Alignment: 'Center', BgColor: '#FFFFFF', FontSize: 10, FontColor: "#000000", IsBold: false, IsItalic: true, IsUnderLine: false },
    FootStyle: { Alignment: 'Center', BgColor: '#D8D8D8', FontSize: 12, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false },
    RowStart: 1,
    ColumStart: 1,
    SheetName: 'sheet'
    }
    var excelxml = JSXmlExcel.BulidXml(opts);//导出的excel对应的xml字符串


    if ($.browser.msie) { //如果是IE浏览器,ie方式的导出

    var xlsWin = null;
    if (!!document.all("glbHideFrm")) {
    xlsWin = glbHideFrm;
    } else {
    var width = 1; var height = 1;
    var openPara = "left=" + (window.screen.width / 2 + width / 2) + ",top=" + (window.screen.height + height / 2) + ",scrollbars=no,width=" + width + ",height=" + height;
    xlsWin = window.open("", "_blank", openPara);
    }
    xlsWin.document.write(excelxml);
    xlsWin.document.close();
    xlsWin.document.execCommand('Saveas', true, "导出数据.xls");
    xlsWin.close();
    }else{ //其他浏览器的导出

    var urlObject = window.URL || window.webkitURL || window;
    var export_blob = new Blob([excelxml]);
    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = "导出数据.xls";
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent(
    "click", true, false, window, 0, 0, 0, 0, 0
    , false, false, false, false, 0, null
    );
    save_link.dispatchEvent(ev);
    }

    }

    </script>
    </head>
    <body>
    <ul id="grid">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    <div id="app">
    <ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
    <li>55</li>
    </ul>
    <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    </ul>
    <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
    </ul>
    <ul>
    <li>语文</li>
    <li>数学</li>
    <li>英语</li>
    <li>生物</li>
    <li>化学</li>
    </ul>
    </div>
    <button onclick="exportExcel();return false;">导出数据为excel文件</button><br><br>
    </body>
    </html>

  • 相关阅读:
    2019版:第七章:(1)Redis 持久化—RDB
    第三章:(2)高可用 之 集群下dubbo负载均衡配置
    2019版:第六章:(1)Redis 事务
    2019版:第七章:(3)Redis 持久化—RDB和AOF
    第二章:(7)Dubbo 配置与SpringBoot整合
    第二章:(6)Dubbo 常用配置之 本地存根
    2019版:第六章:(2)Redis 事务—秒杀案例
    2019版:第七章:(2)Redis 持久化—AOF
    敏捷开发修炼之道读书笔记2
    敏捷开发修炼之道读书笔记1
  • 原文地址:https://www.cnblogs.com/xumqfaith/p/7009886.html
Copyright © 2011-2022 走看看