问题
I am trying to export div data which using Jquery. When i click Export To Excel button the file is downloading. but the value is single row only i need to split separate row.
Example:
FirstName Last Name
NAMA VEENESH
JS:
$("#ExportToExcel").click(function (e) {
let file = new Blob([$('#ExportDetails').html()], { type: "application/vnd.ms-excel" });
let url = URL.createObjectURL(file);
let a = $("<a />", {
href: url,
download: "filename.xls"
}).appendTo("body").get(0).click();
e.preventDefault();
});
HTML:
<div class="losSection" id="secReviewerDemographics"><div class="losSectionHeader"><div class="losSectionSel losSectionTitle misign" data-originaltitle="Demographics">Demographics</div></div><div id="cpC_kf_secview_50" class="losSectionView"><div>
<div id="ExportDetails" class="">
<div class="tabularView">
<input type="hidden" name="kaf_78" id="kaf_78" aria-label="kaf_78" value="01" class="._shCE">
<div id="cpC_ctl73" class="tabularTbl flex-row start-xs">
<div class="pad1x flex-row leftLblMode">
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div style="">
<label for="kaf_70" id="klb_70" class="input-control-label input-control-label input-control-label input-control-label input-control-label input-control-label">First Name
</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div class="labelValueField">
<span class="labelValue" name="kaf_70" id="kaf_70">
<span class="labelValue" name="kaf_70" id="kaf_70" aria-label="Applicant First Name">NAMA</span>
</span>
</div>
</div>
</div>
<div class="pad1x flex-row leftLblMode">
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div style="">
<label for="kaf_71" id="klb_71" class="input-control-label input-control-label input-control-label input-control-label input-control-label input-control-label">Middle Name</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div class="labelValueField">
<span class="labelValue" name="kaf_71" id="kaf_71">
<span class="labelValue" name="kaf_71" id="kaf_71" aria-label="Applicant Middle Name">VEENESH</span>
</span>
</div>
</div>
</div>
<div class="pad1x flex-row leftLblMode">
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div style="">
<label for="kaf_72" id="klb_72" class="input-control-label input-control-label input-control-label input-control-label input-control-label input-control-label">Last Name
</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div class="labelValueField">
<span class="labelValue" name="kaf_72" id="kaf_72">
<span class="labelValue" name="kaf_72" id="kaf_72" aria-label="Applicant Last Name">KUMAR</span>
</span>
</div>
</div>
</div>
<div class="pad1x flex-row leftLblMode">
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div style="">
<label for="kaf_73" id="klb_73" class="input-control-label input-control-label input-control-label input-control-label input-control-label input-control-label">Date Of Birth
</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div class="labelValueField">
<span class="labelValue" name="kaf_73" id="kaf_73" data-sid="DOB" attrdateofbirth="Yes">
<span class="labelValue" name="kaf_73" id="kaf_73" aria-label="Date Of Birth">18-11-1980</span>
</span>
</div>
</div>
</div>
<div class="pad1x flex-row leftLblMode">
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div style="">
<label for="kaf_74" id="klb_74" class="input-control-label input-control-label input-control-label input-control-label input-control-label input-control-label">Gender
</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div class="labelValueField">
<span class="labelValue" name="kaf_74" id="kaf_74" data-sid="Gender" data-kcurrentval="Male">
<span class="labelValue" name="kaf_74" id="kaf_74" aria-label="Gender">MALE</span>
</span>
</div>
</div>
</div>
<div class="pad1x flex-row leftLblMode">
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div style="">
<label for="kaf_75" id="klb_75" class="input-control-label input-control-label input-control-label input-control-label input-control-label input-control-label">Email Address
</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div class="labelValueField">
<span class="labelValue" name="kaf_75" id="kaf_75" data-sid="EmailQDE2">
<span class="labelValue" name="kaf_75" id="kaf_75" aria-label="Email Address">ivinraj.s@gmail.com</span>
</span>
</div>
</div>
</div>
<div class="pad1x flex-row leftLblMode">
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div style="">
<label for="kaf_76" id="klb_77" class="input-control-label input-control-label input-control-label input-control-label input-control-label input-control-label">Country Code
</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div class="labelValueField">
<span class="labelValue" name="kaf_76" id="kaf_76" data-sid="TelephoneNumberQDE2">
<span class="labelValue" name="kaf_76" id="kaf_76" aria-label="Telephone Country Code">+91</span>
</span>
</div>
</div>
</div>
<div class="pad1x flex-row leftLblMode">
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div style="">
<label for="kaf_76" id="klb_77" class="input-control-label input-control-label input-control-label input-control-label input-control-label input-control-label">Mobile Number
</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div class="labelValueField">
<span class="labelValue" name="kaf_76" id="kaf_76" data-sid="TelephoneNumberQDE2">
<span class="labelValue" name="kaf_77" id="kaf_77" aria-label="Telephone Number">8760609111</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div></div>
<button id="ExportToExcel">Export To Excel</button>
Demo Fiddle: Export To Excel
回答1:
What you do at the moment is copy the complete blob to an Excel file (Only extension wise because Excel is not recognizing it as a valid xls). When I open the jsFiddle created Excelit is exactly what I see. So you have to write a routine to iterate over the elements putting them into a csv format and export it as csv to Excel.
Your task would be easier if the data is stored in table format and not as div collection. Either way you need an element (preudo class) seperating the different rows = data entries. Then you could do e.g. (partly pseudo code):
var csvContent= "First Name, Middle Name, Last Name, .... , Mobile Number;"; // Headers for CSV file
var dataElements = document.getElementsByClassName("dataEntry");
for (var i = 0; i < dataElements.length; i++) { // we iterate through all data entries
// If your ids per entry (one person) are fix (which is a bad idea)
var entryLineCsv = document.getElementById("kaf_x1").value + ","
+ document.getElementById("kaf_x2").value + ","
... some more colums ...
document.getElementById("kaf_xlast").value + ";"; // here we got on csv line
createCsvFile(entryLineCsv);
}
function createCsvFile(addEntryLineIoCsv) {
csvContent = csvContent + addEntryLineIoCsv;
}
Then you export the CSV to Excel.
Think about reducing the html-"hell" to a flex table so you could easier grab the data.
来源：https://stackoverflow.com/questions/60797469/how-to-export-to-excel-a-div-content-using-jquery