如何使用 Jquery 将 div 内容导出到 Excel？答案

【问题标题】：How to Export to Excel a div content using Jquery?如何使用 Jquery 将 div 内容导出到 Excel？
【发布时间】：2020-07-02 23:11:40
【问题描述】：

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

例子：

名字姓氏

纳马维内什

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>

演示小提琴：Export To Excel

【问题讨论】：

为什么不使用表格元素？或者你为什么不直接从后端发送 Excel 文件？
@Çağrı 值仅采用这种格式。没有后端支持
那么你应该创建隐藏的表格元素并使用 jquery 填充该表格然后导出表格元素。它会给你预期的结果
请澄清您的问题：您是否希望所有表格行到 Excel 行或单个表格行到相应的 Excel 列中。举一个你期望的例子和一个你现在得到的例子。
@Codebreaker007 是的，我想将所有表格行导出到 excel。

标签： javascript jquery html css ajax

【解决方案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-“地狱”简化为弹性表，以便更轻松地获取数据。

【讨论】：

不，我不会为你编写程序。我给了你方向，但你必须自己去。
stackoverflow.com/questions/60801109/…