简体   繁体   English

使用JavaScript将HTML表格中的数据保存到excel

[英]Save Data From Html Table to excel using JavaScript

Save Data From Html Table to excel using JavaScript 使用JavaScript将HTML表格中的数据保存到excel
That following code is working fine but when i fill the data in input text box than Filled Data is not exporting in excel. 下面的代码工作正常,但是当我在输入文本框中填充数据时,填充数据不会在excel中导出。
Like Dealer Name So Please Take a Look On code and tell me how to export Html Table With input text into Excel. 像经销商名称一样,所以请看一下代码,告诉我如何将带有输入文本的HTML表格导出到Excel。
Appreciate Your Help.. 感谢您的帮助..
My Code : 我的代码:

 var table2excel = (function() { var uri = 'data:application/vnd.ms-excel;base64,', template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>', base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function(s, c) { return s.replace(/{(\\w+)}/g, function(m, p) { return c[p]; }) } return function(table, name, text) { if (!table.nodeType) table = document.getElementById(table) var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML } window.location.href = uri + base64(format(template, ctx)) } })() 
 <html> <head> <title> excel sheet </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <script src="table2excel.js"></script> <input type="button" onclick="table2excel('testTable', 'Analysis Results')" value="Export to Excel" /> <div id="hidTable"> <table id="testTable"> <tr> <td class="xl67">Pre Approval form for marketing Claims</td> </tr> <tr> <td class="xl68" colspan="2" rowspan="2" style='height:40.50pt;border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext ;'> <pre>Dealer Name:</pre> <input id="tab1" type="text" style="width: 150px; padding-top: 2px; "> </td> <td class="xl68" colspan="3" style='border-right:.5pt solid windowtext; border-bottom:initial;'> <pre>Request Number</pre> <input id="tab2" type="text" style="width: 95px; padding-top: 2px;"> </td> <td class="xl68" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:initial;'> <pre>Date Issued:</pre> <input id="tab3" type="text" style="width: 75px; padding-top: 2px;"> </td> </tr> <tr> <td class="xl71" colspan="3" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td> <td class="xl71" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td> </tr> <tr> <td class="xl74">Start Date:</td> <td class="xl75"> <input type="text" style="width: 150px ; padding-top: 2px;" /> </td> <td class="xl76"></td> <td class="xl77" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td> <td class="xl74">End Date: </td> <td class="xl78" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'> <input type="text" style="width: 120px; padding-top: 2px;"> </td> </tr> <tr> <td class="xl80" colspan="7" style='height:15.75pt;border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'>Type of Marketing Activity<span style='mso-spacerun:yes;'>&nbsp;</span></td> </tr> <tr style='height:38.25pt;'> <td class="xl83" style='height:38.25pt;'>Print Advert </td> <td class="xl84">Name of Publication</td> <td class="xl85">Size sqm/sqf</td> <td class="xl85">Cost per sqm/sqf</td> <td class="xl86"># of Inserts</td> <td class="xl87">Cost per insert</td> <td class="xl86">total Cost</td> </tr> <tr> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="magazine" name="magazine" value="magazine" /> <label for="magazine">Magazine</label> </td> <td class="xl89"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="numVal1" id="qty" onkeyup="getValues()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="numVal2" id="price" onkeyup="getValues()" style="width:152px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="numVal3" id="discount" onkeyup="getValues()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="numVal5" id="freight" onkeyup="getValues()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="totalValue" id="total" style="width:60px; padding-top: 2px;" /> </td> </tr> <tr style='height:21.00pt;'> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="Newspaper" name="Newspaper" value="Newspaper" /> <label for="Newspaper">Newspaper</label> </td> <td class="xl89"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl89"> <input type="text" class="value1" id="quantity" onkeyup="getnews()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl89"> <input type="text" class="value2" id="priceRange" onkeyup="getnews()" style="width: 152px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="value3" id="discountPer" onkeyup="getnews()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="value5" id="Offer" onkeyup="getnews()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="totalrock" id="totalCost" style="width:60px; padding-top: 2px;" /> </td> </tr> <tr style='height:21.00pt;'> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="Directories" value="Directories" />Directories </td> <td class="xl89"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl89"> <input type="text" class="sam1" id="quantity1" onkeyup="getDir()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl89"> <input type="text" class="sam2" id="priceRange1" onkeyup="getDir()" style="width: 152px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="sam3" id="discountPer1" onkeyup="getDir()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="sam5" id="Offer1" onkeyup="getDir()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="totalRock" id="totalSam" style="width:60px; padding-top: 2px;" /> </td> </tr> <tr style='height:21.00pt;'> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="NewspaperInserts" value="NewspaperInserts" />Newspaper No. </td> <td class="xl89"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl89"> <input type="text" class="sam11" id="quantity11" onkeyup="getPaper()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl89"> <input type="text" class="sam22" id="priceRange11" onkeyup="getPaper()" style="width: 152px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="sam33" id="discountPer11" onkeyup="getPaper()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="sam55" id="Offer11" onkeyup="getPaper()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="totalRock1" id="totalPaper" style="width:60px; padding-top: 2px;" /> </td> </tr> <tr style='height:21.00pt;'> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="Journals" value="Journals" />Journals </td> <td class="xl89"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl89"> <input type="text" class="sam111" id="quantity111" onkeyup="getJourn()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl89"> <input type="text" class="sam222" id="priceRange111" onkeyup="getJourn()" style="width: 152px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="sam333" id="discountPer111" onkeyup="getJourn()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="sam555" id="Offer111" onkeyup="getJourn()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="totalRock11" id="totalJourn" style="width:60px; padding-top: 2px;" /> </td> </tr> <tr style='height:21.00pt;'> <td class="xl90" style='height:21.00pt;'>Position of the Advert</td> <td class="xl86" colspan="6" style='border-right:.5pt solid border-bottom:.5pt solid'> </td> </tr> <tr style='height:39.00pt;'> <td class="xl92" style='height:39.00pt;'>Out Door Advertising</td> <td class="xl86">Location</td> <td class="xl85">Size sqm/sqf</td> <td class="xl85">Cost per sqm/sqf</td> <td class="xl86">Per Month</td> <td class="xl86">Period</td> <td class="xl86">total Cost</td> </tr> <tr style='height:21.00pt;'> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="hoardings" name="hoardings" value="hoardings" />Hoardings </td> <td class="xl93"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="hoard1" id="mage1" onkeyup="getHoard()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="hoard2" id="mage2" onkeyup="getHoard()" style="width:152px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="hoard3" id="mage3" onkeyup="getHoard()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="hoard5" id="mage5" onkeyup="getHoard()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="mageRock" id="totalHoard" style="width:60px; padding-top: 2px;" /> </td> </tr> <tr style='height:21.00pt;'> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="MobileBillboards" name="Mobile Billboards" value="MobileBillboards" />Mobile Bill </td> <td class="xl93"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl94"> <input type="text" class="bill1" id="mage11" onkeyup="getBill()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="bill2" id="mage22" onkeyup="getBill()" style="width:152px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="bill3" id="mage33" onkeyup="getBill()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="bill5" id="mage55" onkeyup="getBill()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="mageBill" id="totalBill" style="width:60px; padding-top: 2px;" /> </td> </tr> <tr style='height:21.00pt;'> <td class="xl88" height="28" style='height:21.00pt;'> <input type="checkbox" id="Posters" name="Posters" value="Posters" />Posters </td> <td class="xl93"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl94"> <input type="text" class="post1" id="mage111" onkeyup="getPost()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="post2" id="mage222" onkeyup="getPost()" style="width: 152px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="post3" id="mage333" onkeyup="getPost()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="post5" id="mage555" onkeyup="getPost()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="magePost" id="totalPost" style="width: 60px; padding-top: 2px;" /> </td> </tr> <tr style='height:21.00pt;'> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="VinylBanners" name="Vinyl Banners" value="VinylBanners" />Vinyl Banners </td> <td class="xl90"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl95"> <input type="text" class="post11" id="ban1" onkeyup="getBan()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="post22" id="ban2" onkeyup="getBan()" style="width:152px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="post33" id="ban3" onkeyup="getBan()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="post55" id="ban5" onkeyup="getBan()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="mageBan" id="totalBan" style="width: 60px; padding-top: 2px;" /> </td> </tr> <tr style='height:21.00pt;'> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="LEDDisplays" name="LED Displays" value="LEDDisplays" /> <label for="LEDDisplays">LED Displays</label> </td> <td class="xl90"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl95"> <input type="text" class="post111" id="ban11" onkeyup="getLed()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="post222" id="ban22" onkeyup="getLed()" style="width: 152px; padding-top: 2px;" /> </td> <td class="xl91"> <input type="text" class="post333" id="ban33" onkeyup="getLed()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="post555" id="ban55" onkeyup="getLed()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="mageLed" id="totalLed" style="width: 60px; padding-top: 2px;" /> </td> </tr> <tr style='height:15.00pt;'> <td class="xl96" style='height:15.00pt;'>Digital Marketing</td> <td class="xl97"></td> <td class="xl98"></td> <td class="xl97"></td> <td class="xl97"></td> <td class="xl97"></td> <td class="xl99"></td> </tr> <tr style='height:21.00pt;'> <td class="xl100" colspan="2" style='height:21.00pt;border-right:.5pt solid border-bottom:.5pt solid'> <input type="checkbox" id="GoogleAdwords" name="Google Adwords" value="GoogleAdwords" />Google Adwords </td> <td class="xl102" colspan="3" style='border-right:none; border-bottom:.5pt solid windowtext;'> <input type="text" style="width: 300px; padding-top: 2px;" /> </td> <td class="xl103"></td> <td class="xl104"></td> </tr> <tr style='height:21.00pt;'> <td class="xl105" colspan="2" style='height:21.00pt;border-right:.5pt border-bottom:.5pt solid '> <input type="checkbox" id="SocialMediaMarketing" name="Social Media Marketing" value="SocialMediaMarketing" />Social Media Marketing </td> <td class="xl107" colspan="3" style='border-right:none; border-bottom:.5pt solid'> <input type="text" style="width: 300px; padding-top: 2px;" /> </td> <td class="xl108"></td> <td class="xl109"></td> </tr> <tr style='height:29.25pt;'> <td class="xl110" style='height:29.25pt;'> Electronic Adverts</td> <td class="xl86">City/Station/Channel</td> <td class="xl86">No of Spots</td> <td class="xl111">Duration</td> <td class="xl86">Cost</td> <td class="xl91">Cost for durtation</td> <td class="xl90"></td> </tr> <tr style='height:21.00pt;'> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="MultiplexAdv." name="Multiplex Adv." value="MultiplexAdv." />Multiplex Adv. </td> <td class="xl93"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl94"> <input type="text" class="multi1" id="multi11" onkeyup="getMulti()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="multi2" id="multi22" onkeyup="getMulti()" style="width:152px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="multi3" id="multi33" onkeyup="getMulti()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="multi5" id="multi55" onkeyup="getMulti()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="mageMulti" id="totalMulti" style="width: 60px; padding-top: 2px;" /> </td> </tr> <tr style='height:21.00pt;'> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="RadioSpots" name="Radio Spots" value="RadioSpots" />Radio Spots </td> <td class="xl93"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl94"> <input type="text" class="radio1" id="radio11" onkeyup="getRadio()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="radio2" id="radio22" onkeyup="getRadio()" style="width:152px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="radio3" id="radio33" onkeyup="getRadio()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="radio5" id="radio55" onkeyup="getRadio()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="mageRadio" id="totalRadio" style="width: 60px; padding-top: 2px;" /> </td> </tr> <tr style='height:21.00pt;'> <td class="xl88" style='height:21.00pt;'> <input type="checkbox" id="TVAds" name="TV Ads" value="TVAds" />TV Ads </td> <td class="xl93"> <input type="text" style="width: 128px; padding-top: 2px;" /> </td> <td class="xl94"> <input type="text" class="tv1" id="tv11" onkeyup="getTv()" style="width: 75px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="tv2" id="tv22" onkeyup="getTv()" style="width:152px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="tv3" id="tv33" onkeyup="getTv()" style="width: 70px; padding-top: 2px;" /> </td> <td class="xl93"> <input type="text" class="tv5" id="tv55" onkeyup="getTv()" style="width: 65px; padding-top: 2px;" /> </td> <td class="xl90"> <input type="text" class="mageTv" id="totalTv" style="width: 60px; padding-top: 2px;" /> </td> </tr> <tr style='height:18.00pt;'> <td class="xl786 " colspan="7" rowspan="5" style='height:90.00pt;border-right:.5pt solid windowtext; border-bottom:.5pt solid windowtext;'>working description <br /> <textarea rows="6" cols="140" name="comment" form="usrform"></textarea> </td> </tr> <tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr> <tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr> <tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr> <tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr> <tr style='height:2.00pt;'></tr> <tr style='height:15.00pt;'> <td class="xl115" colspan="7" style='height:15.00pt;border-right:.5pt solid border-bottom:.5pt solid '>Contact Details of Media to be Used</td> </tr> <tr class="xl65" style='height:19.50pt;'> <td class="xl88" style='height:19.50pt;'>Contact Person</td> <td class="xl88" colspan="2" style='border-right:.5pt solid border-bottom:.5pt solid '> <input type="text" style="width: 180px; padding-top: 2px;" /> </td> <td class="xl86" colspan="4" style='border-right:.5pt solid border-bottom:.5pt solid'> Email Address</td> </tr> <tr class="xl65" style='height:19.50pt;'> <td class="xl88" style='height:19.50pt;'>Contact Number</td> <td class="xl88" colspan="2" style='border-right:.5pt solid border-bottom:.5pt solid '> <input type="text" style="width: 180px; padding-top: 2px;" /> </td> <td class="xl86" colspan="4" style='border-right:.5pt solid border-bottom:.5pt solid '> <input type="text" style="width: 272px; padding-top: 2px;" /> </td> </tr> <tr style='height:15.00pt;'> <td class="xl70" colspan="7" style='height:15.00pt;border-right:none;border-bottom:none;'>For ABC </td> </tr> <tr style='height:15.00pt;'> <td class="xl96" style='height:15.00pt;'>Checklist </td> <td class="xl116"></td> <td class="xl99"></td> <td class="xl117"></td> <td class="xl116"></td> <td class="xl118"></td> <td class="xl99"></td> </tr> <tr style='height:15.75pt;'> <td class="xl119" style='height:15.75pt;'> <input type="checkbox" id="Artwork" name="Artwork" value="Artwork " />Artwork or Design Approval By ABC </td> <td class="xl66"></td> <td class="xl120"></td> <td class="xl121"> <input type="checkbox" id="Sample" name="Sample" value="Sample " />Sample Artwork included </td> <td class="xl66" colspan="2" style='mso-ignore:colspan;'> </td> <td class="xl120"></td> </tr> <tr style='height:15.75pt;'> <td class="xl119" style='height:15.75pt;'> <input type="checkbox" id="Cost" name="Cost" value="Cost " />Cost Approval by ABC </td> <td class="xl66"></td> <td class="xl120"></td> <td class="xl121"> <input type="checkbox" id="Image" name="Image" value="Image" />Sample Image included </td> <td class="xl66" colspan="2"> </td> <td class="xl120"></td> </tr> <tr style='height:15.75pt;'> <td class="xl119" style='height:15.75pt;'> <input type="checkbox" id="Location" name="Cost" value="Location" />Location: </td> <td class="xl122"></td> <td class="xl123"></td> <td class="xl121"> <input type="checkbox" id="Costing" name="Costing" value="Costing" />Costing included </td> <td class="xl66" colspan="2"> </td> <td class="xl120"></td> </tr> </table> </div> </body> </html> 

This seems to work with jQuery: 这似乎适用于jQuery:

Download: 下载:

https://www.jqueryscript.net/demo/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel/

Source: 资源:

<script src="scripts/jquery.table2excel.js"></script>

Script: 脚本:

            $("#testTable").table2excel({
            // exclude CSS class
            exclude: ".noExl",
            name: "Worksheet Name",
            filename: "Products" //do not include extension
        }); 

It will give you the download. 它将为您提供下载。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM