使用 Jquery 将 div 内容导出到 Excel 分隔行和单元格？

Question

我正在尝试使用 Jquery 导出 div 数据。但价值来自同一个单元格

这里是示例图片：

我需要下面的示例图片：

有些东西遗漏了我的代码，请帮助我。

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>     

演示代码：DEMO LiNK

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();
}

Working Example

请注意，我在 jsFiddle 示例中添加了多行代码，以便您了解它的可扩展性。