Question

在我的UI上，我有一个HTML表和一些Input字段，所有字段都有一些数据，包括table，所以我想做的是：-

我想将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

更改场景以将JSON转换为CSV，而不是将html转换为excel。因为，您有数据，并且您的数据是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>

//结果

将HTML数据导出到Excel

1 个答案: