如何使用Jquery将div内容导出到Excel? [英] How to Export to Excel a div content using Jquery?
本文介绍了如何使用Jquery将div内容导出到Excel?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用jQuery导出div数据.当我单击导出到Excel 按钮时，文件正在下载.但该值是单行，只有我需要分开分开的行.
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.
示例:
名字姓
NAMA VEENESH
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: 导出到Excel
Demo Fiddle: Export To Excel
推荐答案
此刻，您要做的是将完整的blob复制到Excel文件中(仅扩展名是有效的，因为Excel无法将其识别为有效的xls).当我打开jsFiddle创建的Excelit时，正是我所看到的.因此，您必须编写例程以迭代将元素转换为csv格式的元素，然后将其作为csv导出到Excel.
如果数据以表格式而不是div集合存储，则您的任务将更加容易.无论哪种方式，您都需要一个将不同行=数据条目分隔开的元素(伪类).然后您可以例如(部分伪代码):
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;
}
然后将CSV导出到Excel.
考虑将html-"hell"减少到flex表中，这样您就可以更轻松地获取数据.
Then you export the CSV to Excel.
Think about reducing the html-"hell" to a flex table so you could easier grab the data.
这篇关于如何使用Jquery将div内容导出到Excel?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
