Как экспортировать в Excel содержимое div, используя Jquery? - PullRequest
0 голосов
/ 22 марта 2020

Я пытаюсь экспортировать данные div, которые используют Jquery. Когда я нажимаю кнопку Экспорт в Excel , файл загружается. но значение - только одна строка, мне нужно разделить отдельную строку.

Пример:

Имя Фамилия

НАМА ВЕНЕ SH

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> 

Демо-скрипта: Экспорт в Excel

1 Ответ

1 голос
/ 22 марта 2020

В данный момент вы копируете полный двоичный объект в файл Excel (только с расширением, поскольку Excel не распознает его как действительный xls). Когда я открываю созданный jsFiddle Excel, это именно то, что я вижу. Поэтому вам нужно написать процедуру для перебора элементов, помещая их в формат csv и экспортировать их как csv в Excel.
Ваша задача будет проще, если данные хранятся в табличном формате, а не в виде коллекции div. В любом случае вам нужен элемент (класс preudo), разделяющий разные строки = записи данных. Тогда вы можете сделать, например, (частично псевдокод):

 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 - «ада» до гибкой таблицы, чтобы вам было легче захватить данные.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...