JSFiddle - React, Tailwind, and code Playground
by Ivin Raj S
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_69" id="kaf_69" class="input-control-label input-control-label input-control-label input-control-label input-control-label input-control-label">Applicant ID
</label>
</div>
</div>
<div class="pad1x flex-col-xs-12 flex-col-sm-6">
<div class="labelValueField">
<span class="labelValue" name="kaf_69" id="kaf_69">
<span class="labelValue" name="kaf_69" id="kaf_69" aria-label="Applicant ID">1</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_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"...
JavaScript
let csv = $('.sample').map((i, sample) => {
return $(sample).find('span > .labelValue').map((_, field) => field.innerText).get().join(',');
}).get();
csv.unshift('Applicant ID,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();
}