javascript - Table2excel plugin does not work -
i working on dashboard app , implement "download table .xls" feature.
on link can see how table looks dashboard
i have found library includes tutorial explains set up. can see in code below have done more or less explained. not work , reason table not exported.
as can see, have included jquery.table2excel.js in resources other resources used page. have checked if .js file available after page loaded , looks good.
i have tried this
$(function () { document.getelementbyid('btnexport').addeventlistener("click", function () { document.getelementbyid('mytable').table2excel({ exclude: ".noexl", name: "excel document name", filename: "myfilename" }); }); }); but not , when execute function message in debugg console
typeerror: document.getelementbyid(...).table2excel not function
this how index.jsp looks @ moment
<%@page contenttype="text/html" pageencoding="utf-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>kpi admin</title> <link href="<c:url value="/resources/css/bootstrap.min.css" />" rel="stylesheet"> <link href="<c:url value="/resources/css/addition.css" />" rel="stylesheet"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="<c:url value="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />"></script> <script src="<c:url value="http://code.jquery.com/ui/1.9.2/jquery-ui.js" />"></script> <script src="<c:url value="/resources/js/bootstrap.js" />"></script> <script src="<c:url value="/resources/js/addition.js" />"></script> <script src="<c:url value="/resources/js/jquery.table2excel.js" />"></script> <script> $(function () { document.getelementbyid('btnexport').addeventlistener("click", function () { $(".table2excel").table2excel({ exclude: ".noexl", name: "excel document name", filename: "myfilename" }); }); }); </script> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <!-- /.nav --> </nav> <div class="container"> <div class="starter-template"> <ul class="nav nav-tabs"> <!-- /.tabs --> </ul> <!-- tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="a"> <form:form action="/kpiadmin/kpis" method="get"> <div class="row form-inline"> <div class="form-group"> <label for="date">date</label> <input id="startdatepicker" type="text" class="form-control" name="date" value="${date}" > </div> <button type="submit" class="btn btn-default">submit</button> </div> <br> <div class="table-responsive"> <table id="mytable" class="table table-bordered table2excel"> <thead> <tr> <td>name</td> <td>last import</td> <td>last value</td> <td colspan="4">values</td> <td colspan="3">targets</td> <td colspan="3">score</td> <td>action</td> </tr> </thead> <tr> <td></td> <td></td> <td></td> <td class="text-center" style="font-weight: 700;">dtd</td> <td class="text-center" style="font-weight: 700;">wtd</td> <td class="text-center" style="font-weight: 700;">mtd</td> <td class="text-center" style="font-weight: 700;">ytd</td> <td class="text-center" style="font-weight: 700;">0</td> <td class="text-center" style="font-weight: 700;">100</td> <td class="text-center" style="font-weight: 700;">150</td> <td class="text-center" style="font-weight: 700;">wtd</td> <td class="text-center" style="font-weight: 700;">mtd</td> <td class="text-center" style="font-weight: 700;">ytd</td> <td></td> </tr> <c:foreach var="row" items="${rows}" varstatus="loop"> <!-- /.loop creates table --> </c:foreach> <tr> <!-- /. last row mean --> </tr> </table> </div> </form:form> <button id="btnexport" class="btn btn-default">export .xls</button> </div> <div class="tab-pane fade" id="b"> <!-- content inside tab b --> </div> <div class="tab-pane fade" id="c"> <!-- content inside tab c --> </div> </div> </div> </div><!-- /.container -->
i realy not sure cause problem or have error in jquery syntax. lib not inportet correctly within .jsp page way working me in past. guess using right jquery version since jquery datepicker works fine.
if able see case issue, please me fix it. if have better idea how export table excel file please suggest.
thx in advance.
edit 1:
i have changed function , looks code have posted below. if execute console.log("exporting..."); before or after $(".table2excel").table2excel({ ... }); "exporing..." printed out in console. excludes jquery potential cause of problem.
<script> $(function () { $('#btnexport').click(function () { console.log("exporting..."); $(".table2excel").table2excel({ exclude: ".noexl", name: "excel document name", filename: "myfilename" }); }); }); </script> edit 2:
since not able fix this, have tried try new. have found this solutions , works still not to, hope can me improve it.
my table looks 
and result 
first of looks strange without excel grid, have idea why file exported without , how can add it?
second remove column after ytd additional infos presented. somehow possible adjust tab_text.replace(...) below in order achive this
in html looks this
</td><td width='20px'> <a class='infobox' href=''> <img src='img/info.jpg' alt='info' width='18' height='18'> <span> service engineer: ... <br> datasource: ... </span> </a> </tr> javascript function looks this
function exportexcelreport(tblid) { var tab_text = "<table border='2px'><tr>"; var table = document.getelementbyid(tblid); var style; (var j = 0; j < table.rows.length; j++) { style = table.rows[j].classname.split(" "); if (style.length < 2) tab_text = tab_text + table.rows[j].innerhtml + "</tr>"; } tab_text = tab_text + "</table>"; tab_text = tab_text.replace(/<a[^>]*>|<\/a>/g, ""); tab_text = tab_text.replace(/<img[^>]*>/gi, ""); tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); return window.open('data:application/vnd.ms-excel,' + encodeuricomponent(tab_text)); } thx!
add before return
tab_text = tab_text.replace(/<a class='infobox'[\s\s]*?<\/a>/gi, ""); you can play around string in replace (before comma) on site: regexr.com
more info on multiline match here
Comments
Post a Comment