zoukankan      html  css  js  c++  java
  • 如何将页面上的数据导入excel中

    网上关于页面数据导入excel的文章很多,但是大部分都是关于 ActiveXObject 对象,可是ActiveXObject 对象是只支持IE的,可我连IE11也测试了,还是无法识别,又查到消息,好像该对象只支持IE7,IE8,所以果断放弃。

    继续查找各大论坛,终于找到JsExcelXml的插件,

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <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("th").each(function(i) {
    var text = $(this).text();
    var column = { field: text, title: text};
    columnsInfo.push(column);
    });
    $("#grid").find("tr").each(function(i) {
    if(i == 0) return true;
    var dataObj = new Object();
    $(this).find("td").each(function(j) {
    var column = columnsInfo[j];
    var text = $(this).text();
    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>
    <button onclick="exportExcel();return false;">导出数据为excel文件</button><br><br>

    <style type="text/css">
    table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border- 1px;
    border-color: #666666;
    border-collapse: collapse;
    }
    table.gridtable th {
    border- 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
    }
    table.gridtable td {
    border- 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
    }
    </style>


    <table id="grid" class="gridtable">
    <tr>
    <th>Header1</th><th>Header2</th><th>Header3</th>
    </tr>
    <tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
    </tr>
    <tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
    </tr>
    </table>



    </body>

    </html>

    这是主要针对table结构的数据进行处理。

  • 相关阅读:
    基础DP背包
    哲学思絮01
    Vue使用ElementUI
    Vue-Mock数据
    Vue生命周期
    Vue实战之CURD
    读《间客》有感
    ASP.Net Core网站发布
    Cycling之 标签化
    Vue环境搭建
  • 原文地址:https://www.cnblogs.com/xumqfaith/p/7009872.html
Copyright © 2011-2022 走看看