保存数据从HTML表格到Excel使用JavaScript
保存数据从HTML表格使用JavaScript
到Excel中下面的代码工作正常，但是当我填写比数据填充未在Excel导出的文本框中输入的数据。
像经销商名称所以请看看代码，并告诉我如何将输入文本的HTML表格导出到Excel中。
感谢您的帮助..
我的代码：保存数据从HTML表格到Excel使用JavaScript
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;'> </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>
回答：
这似乎与jquerey工作...
下载：
https://www.jqueryscript.net/demo/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel/ 来源：
<script src="scripts/jquery.table2excel.js"></script> 脚本：
$("#testTable").table2excel({ // exclude CSS class
exclude: ".noExl",
name: "Worksheet Name",
filename: "Products" //do not include extension
});
它会给你下载。
以上是 保存数据从HTML表格到Excel使用JavaScript 的全部内容， 来源链接： utcz.com/qa/261482.html
