使用Jquery将Excel内容导出到Excel中以分隔行和单元格吗? [英] Export to Excel a div content separate rows and cells using Jquery?
问题描述
我正在尝试使用jQuery导出div数据.但是价值来自同一个细胞
I am trying to export div data which using Jquery. But value is coming same cell
这里是示例图片:
我需要下面的示例图片:
I need below Example image:
有些东西错过了我的代码，请帮助我.
Something missed my code please help me.
JS:
var csvContent= "First Name, Middle Name, Last Name"; // Headers for CSV file
var dataElements = document.getElementsByClassName("sample");
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("kaf70").innerHTML + ","
+ document.getElementById("kaf71").innerHTML + ","
+document.getElementById("kaf72").innerHTML + ","; // here we got on csv line
createCsvFile(entryLineCsv);
}
function createCsvFile(addEntryLineIoCsv) {
let file = new Blob([csvContent = csvContent + addEntryLineIoCsv], { type: "application/vnd.ms-excel" });
let url = URL.createObjectURL(file);
let a = $("<a />", {
href: url,
download: "filename.xls"
}).appendTo("body").get(0).click();
}
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="sample">
<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="kaf70" 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="kaf71" 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="kaf72" aria-label="Applicant Last Name">KUMAR</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
<button id="ExportToExcel" onclick="exportF(this)">Export To Excel</button>
DEMO代码: DEMO LiNK
DEMO Code: DEMO LiNK
推荐答案
您有两个问题.首先是您用来创建Blob的语法无效.您正在使用表达式，但实际上需要提供数据.其次，您尝试创建纯文本格式的XLS文件，而该文件格式不起作用.
You have two issues. The first is the syntax you're using to create the Blob is invalid. You're using an expression yet you need to actually provide the data. Secondly you're attempting to create an XLS file in plain text, which is not how that file format works.
最简单的方法是创建一个CSV文件，该文件以创建字符串的方式进行格式化，您只需要用换行符分隔CSV的每一行即可.
The simplest way to achieve this is to create a CSV file, which is formatted in the manner you create the strings, you simply need to separate each line of the CSV with a line break.
最后，当您使用jQuery时，可以通过使用嵌套的map()调用为输出的每一行创建一个数组来简化检索数据的语法.试试这个:
Finally, as you're using jQuery, the syntax to retrieve the data can be simplified by using nested map() calls to create an array for each line of the output. Try this:
let csv = $('.sample').map((i, sample) => {
return $(sample).find('span > .labelValue').map((_, field) => field.innerText).get().join(',');
}).get();
csv.unshift('First Name,Middle Name,Last Name'); // add headers
createCsvFile(csv);
function createCsvFile(csvArray) {
let file = new Blob([csvArray.join('\r\n')], { type: "application/csv" });
let url = URL.createObjectURL(file);
let a = $("<a />", {
href: url,
download: "filename.csv"
}).appendTo("body").get(0).click();
}
请注意，我在jsFiddle示例中添加了多行，因此您可以看到它的可扩展性.
Note that I added multiple lines to the jsFiddle example so you can see how extensible it is.
这篇关于使用Jquery将Excel内容导出到Excel中以分隔行和单元格吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
