Экспорт в Excel содержимого div отдельных строк и ячеек, используя Jquery?

Question

Я пытаюсь экспортировать данные div, которые используют Jquery. Но значение приходит в ту же ячейку

Вот пример изображения:

Мне нужно ниже Пример изображения:

Что-то пропустил мой код, пожалуйста, помогите мне.

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>     

ДЕМО-код: ДЕМО-ЛИНК

Answer 1

У вас есть две проблемы. Первый синтаксис, который вы используете для создания BLOB-объекта, является недействительным. Вы используете выражение, но вам нужно предоставить данные. Во-вторых, вы пытаетесь создать XLS-файл в виде обычного текста, но этот формат не работает.

Самый простой способ добиться этого - создать файл CSV, отформатированный так же, как вы создаете строки, вам просто нужно отделить каждую строку CSV с помощью разрыва строки.

Наконец, поскольку вы используете jQuery, синтаксис для извлечения данных может быть упрощен с помощью вложенных вызовов map() для создания массива для каждой строки выходных данных. Попробуйте это:

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, чтобы вы могли видеть, насколько он расширяемый .