保存数据从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;'>&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>

回答:

这似乎与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

回到顶部