javascript - 如何使用Jquery将div内容导出到Excel？

Question

我正在尝试使用 Jquery 导出 div 数据。当我单击导出到 Excel 按钮时，文件正在下载。但该值是单行，只有我需要拆分单独的行。

示例:

FirstName Last Name

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> 

演示 fiddle :Export To Excel

Answer 1

您现在要做的是将完整的 blob 复制到 Excel 文件(仅扩展名，因为 Excel 无法将其识别为有效的 xls)。当我打开 jsFiddle 创建的 Excelit 时，这正是我所看到的。因此，您必须编写一个例程来迭代元素，将它们转换为 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“ hell ”减少到 flex 表，以便您可以更轻松地获取数据。