javascript - 将 HTML 数据导出到 excel

Question

在我的 UI 上，我有一个 HTML 表格和一些输入字段，所有字段都有一些数据，包括表格所以我想做的是:-

我想将 HTML 整页数据导出到 excel，所有输入字段以及表格数据，之前我使用 table2excel 插件但它只导出 HTML 表格数据而不是输入字段数据

代码

var tableValue = [{
    "Name": "vivek",
    "Class": "12",
    "English": 89,
    "Maths": 45,
    "Physics": 63
  },
  {
    "Name": "Raul",
    "Class": "11",
    "English": 55,
    "Maths": 45,
    "Physics": 23
  },
  {
    "Name": "Sam",
    "Class": "12",
    "English": 55,
    "Maths": 68,
    "Physics": 56
  },
  {
    "Name": "Arun",
    "Class": "12",
    "English": 45,
    "Maths": 78,
    "Physics": 58
  },
  {
    "Name": "Patric",
    "Class": "12",
    "English": 86,
    "Maths": 45,
    "Physics": 62
  },



]

function addTable(tableValue) {
  var $tbl = $("<table />", {
      "class": "table table-striped table-bordered table-hover"
    }),
    $thd = $("<thead/>"),
    $tb = $("<tbody/>"),
    $trh = $("<tr/>", {
      "class": "text-center"
    });

  $.each(Object.keys(tableValue[0]), function(_, val) {
    $("<th/>").html(val).appendTo($trh);
  });
  $trh.appendTo($thd);
  $.each(tableValue, function(_, item) {
    $tr = $("<tr/>");
    $.each(item, function(key, value) {
      if (typeof(value) === 'number') {
        $("<td/>", {
          "class": "text-right"
        }).html(value).appendTo($tr);
      } else {
        $("<td/>", {
          "class": "text-left"
        }).html(value).appendTo($tr);
      }

      $tr.appendTo($tb);


    });
  });
  $tbl.append($thd).append($tb);
  $("#grnReportTable").html($tbl);



}
$("#supplierAddReport").val("STILL FLOOR, NO. 34, 2ND CROSS, SWASTHI ROAD, SHANTINAGAR, BANGALORE, 560027 Contact Name: SURESH, Contact No. 22745206 GST No. : 29210085111, Email Id: ALPINEPRODUCTS@GMAIL.COM")
addTable(tableValue)

$("#export").click(function() {
  $("#grnReportTable").table2excel({
    filename: "Data"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
<div class="container">


  <div class="container" id="grnReportTable"></div>

  <div class="form-row">

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
      <label for="mrk1">Marks 1</label>
      <div class="input-group">
        <input type="tel" class="form-control" aria-label="Text input with dropdown button" name="mrk1" id="mrk1" readonly="readonly" tabindex="-1" value="50">

      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
      <label for="mrk2">Marks 2</label>
      <div class="input-group">
        <input type="tel" class="form-control" aria-label="Text input with dropdown button" name="mrk2" id="mrk2" readonly="readonly" tabindex="-1" value="50.22">

      </div>
    </div>

    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
      <label for="mrk3">Marks3</label>
      <div class="input-group">
        <input type="tel" class="form-control" aria-label="Text input with dropdown button" name="mrk3" id="mrk3" readonly="readonly" tabindex="-1" value="43">

      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-8">
      <label for="supplierAddReport">Suppl. Address</label>
      <div class="input-group">
        <textarea class="form-control" rows="3" readonly="readonly" name="supplierAddReport" id="supplierAddReport"></textarea>

      </div>
    </div>
  </div>
</div>
<button id="export" class="btn btn-default commonButton">
		<i class='fas fa-file-export'></i>&nbsp;Export
	</button>

<script
    src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

excel 插件的表格只导出 HTML 表格，但我想在这里导出整页数据我只显示输入字段但在我的实际代码中我有一些文本区域以及 select option

我想像一样导出它

Answer 1

不是将 html 转换为 excel，而是将您的方案更改为将 JSON 转换为 CSV。因为，你有数据并且你的数据是 JSON，可以转换为 html 表或 CSV 或其他类型，JSON 到 CSV 的解决方案比 html 到 excel 更好。第一:准备数据。这意味着将您的数据转换为您想要导出的模式。

var tableValue = [
  { // Row for Marks 1
    "Name": "Marks 1",
    "Class": "50",
    "English": "",
    "Maths": "",
    "Physics": ""
  },
  { // Row for Marks 2
    "Name": "Marks 2",
    "Class": "55.22",
    "English": "",
    "Maths": "",
    "Physics": ""
  },
  { // Row for Marks 3
    "Name": "Marks 3",
    "Class": "43",
    "English": "",
    "Maths": "",
    "Physics": ""
  },
  {
    "Name": "",
    "Class": "",
    "English": "",
    "Maths": "",
    "Physics": ""
  },
  {
    "Name": "Name",
    "Class": "Class",
    "English": "English",
    "Maths": "Maths",
    "Physics": "Physics"
  },
  {
    "Name": "vivek",
    "Class": "12",
    "English": 89,
    "Maths": 45,
    "Physics": 63
  },
  {
    "Name": "Raul",
    "Class": "11",
    "English": 55,
    "Maths": 45,
    "Physics": 23
  },
  {
    "Name": "Sam",
    "Class": "12",
    "English": 55,
    "Maths": 68,
    "Physics": 56
  },
  {
    "Name": "Arun",
    "Class": "12",
    "English": 45,
    "Maths": 78,
    "Physics": 58
  },
  {
    "Name": "Patric",
    "Class": "12",
    "English": 86,
    "Maths": 45,
    "Physics": 62
  }
]

，现在你不需要任何额外的库，使用这段代码:

// JAVASCRIPT
function convertToCSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';

    for (var i = 0; i < array.length; i++) {
        var line = '';
        for (var index in array[i]) {
            if (line != '') line += ','

            line += array[i][index];
        }

        str += line + '\r\n';
    }

    return str;
}

function exportCSVFile(headers, items, fileTitle) {
    if (headers) {
        items.unshift(headers);
    }

    // Convert Object to JSON
    var jsonObject = JSON.stringify(items);

    var csv = this.convertToCSV(jsonObject);

    var exportedFilenmae = fileTitle + '.csv' || 'export.csv';

    var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, exportedFilenmae);
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", exportedFilenmae);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

function download(){
  var headers = {
      Name: '', // remove commas to avoid errors
      Class: '',
      English: '',
      Maths: '',
      Physics: ''
  };

  itemsNotFormatted = [
  {
    "Name": "Marks 1",
    "Class": "50",
    "English": "",
    "Maths": "",
    "Physics": ""
  },
  {
    "Name": "Marks 2",
    "Class": "55.22",
    "English": "",
    "Maths": "",
    "Physics": ""
  },
  {
    "Name": "Marks 3",
    "Class": "43",
    "English": "",
    "Maths": "",
    "Physics": ""
  },
  {
    "Name": "",
    "Class": "",
    "English": "",
    "Maths": "",
    "Physics": ""
  },
  {
    "Name": "Name",
    "Class": "Class",
    "English": "English",
    "Maths": "Maths",
    "Physics": "Physics"
  },
  {
    "Name": "vivek",
    "Class": "12",
    "English": 89,
    "Maths": 45,
    "Physics": 63
  },
  {
    "Name": "Raul",
    "Class": "11",
    "English": 55,
    "Maths": 45,
    "Physics": 23
  },
  {
    "Name": "Sam",
    "Class": "12",
    "English": 55,
    "Maths": 68,
    "Physics": 56
  },
  {
    "Name": "Arun",
    "Class": "12",
    "English": 45,
    "Maths": 78,
    "Physics": 58
  },
  {
    "Name": "Patric",
    "Class": "12",
    "English": 86,
    "Maths": 45,
    "Physics": 62
  }
];

  var itemsFormatted = [];

  // format the data
  itemsNotFormatted.forEach((item) => {
      itemsFormatted.push({
          Name: item.Name, // remove commas to avoid errors,
          Class: item.Class,
          English: item.English,
          Maths: item.Maths,
          Physics: item.Physics
      });
  });

  var fileTitle = 'SCORES'; // or 'my-unique-title'

  exportCSVFile(headers, itemsFormatted, fileTitle); // call the exportCSVFile() function to process the JSON and trigger the download
}

//HTML代码

<div class="download-wrapper" onClick="download()">
  <p><i class="material-icons">file_download</i></p>
  <p>Download Demo CSV File</p>
</div>

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="danny_pule" data-slug-hash="WRgqNx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="JSON to CSV">
  <span>See the Pen <a href="https://codepen.io/danny_pule/pen/WRgqNx/">
  JSON to CSV</a> by Danny Pule (<a href="https://codepen.io/danny_pule">@danny_pule</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

//结果