Как экспортировать таблицу HTML с дополнительными данными - PullRequest
Новая
       19

Как экспортировать таблицу HTML с дополнительными данными

0 голосов
/ 04 апреля 2019

У меня есть HTML-таблица внутри div и еще несколько данных внутри элемента span

я пытаюсь экспортировать весь контейнер div в Excel, но это только таблица экспорта

Я использую плагин table2excel для экспорта таблицы

Мой код 

$("#export-btn").click(function() {
  $("#printFull").table2excel({
    filename: "FileName"
  });
});

var tableValue = [{
    "Code": "1040",
    "Item Name": "VEG CHESSE SANDWICH PACKED ",
    "UOM": "NOS",
    "TO Qty": "2.0000",
    "AcceptedQty": "1.0000"
  },
  {
    "Code": "1115",
    "Item Name": "CHICKEN MAYO S/W (CUT INTO 2)",
    "UOM": "NOS",
    "TO Qty": "4.0000",
    "AcceptedQty": "4.0000"
  },
  {
    "Code": "1119",
    "Item Name": "VEGETABLE BURGER ",
    "UOM": "NOS",
    "TO Qty": "2.0000",
    "AcceptedQty": "2.0000"
  },
  {
    "Code": "1120",
    "Item Name": "CHICKEN  BURGER",
    "UOM": "NOS",
    "TO Qty": "2.0000",
    "AcceptedQty": "2.0000"
  },
  {
    "Code": "1053",
    "Item Name": "PUNJABI SAMOSA",
    "UOM": "NOS",
    "TO Qty": "8.0000",
    "AcceptedQty": "8.0000"
  },
  {
    "Code": "1513",
    "Item Name": "CHOCOLATE CUP CAKE",
    "UOM": "NOS",
    "TO Qty": "3.0000",
    "AcceptedQty": "3.0000"
  },
  {
    "Code": "1514",
    "Item Name": "RED VELVETTE CUP CAKE",
    "UOM": "NOS",
    "TO Qty": "3.0000",
    "AcceptedQty": "3.0000"
  }
]

function addTableAcceptance(tableValue) {
  var col = Object.keys(tableValue[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1);
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");
    th.innerHTML = col[i];
    tr.classList.add("text-center");
    tr.appendChild(th);
  }
  for (var i = 0; i < tableValue.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      var tabledata = tableValue[i][col[j]];
      if (tabledata && !isNaN(tabledata)) {
        tabledata = parseInt(tabledata)
      }
      tabCell.innerHTML = tabledata;

      if (col[j] === 'TO Qty' || col[j] === 'AcceptedQty') {
        tabCell.classList.add("text-right");
        tabCell.classList.add("test"); // this the class given by me to these two columns
      }

    }
  }
  var divContainer = document.getElementById("tableID");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");


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

<div class="table-responsive">
  <div id="printFull">

    <span id="printOutlet">Vivek</span>
    <span id="printOutletCode">kumar</span>
    <span id="toNumber">hwellow</span>
    <span id="toDate">test</span>
    <span id="printDateTime">test1</span>


    <table id=tableID></table>
  </div>
</div>
<button id="export-btn" class="btn btn-default commonButton">
	Export
	</button>

Как вы все можете видеть, у меня есть идентификатор элемента div как printFull, внутри которого у меня есть несколько элементов span, и моя таблица, я хочу экспортировать весь div printFull, как он есть

но это только таблица экспорта

здесь я использую плагин table2excel, если есть какой-то другой способ решить эту проблему, то я также открыт для этого

Ответы [ 2 ]

0 голосов
/ 04 апреля 2019

Попробуйте это 

<table id="printFull">
	<tr>
		<td>
		
    <span id="printOutlet">Vivek</span>
    <span id="printOutletCode">kumar</span>
    <span id="toNumber">hwellow</span>
    <span id="toDate">test</span>
    <span id="printDateTime">test1</span>
		</td>
	</tr>

<tr>
	<td>
		
    <table id=tableID></table>
	</td>
</tr>
  </table>
0 голосов
/ 04 апреля 2019

Я лично не использовал плагин table2excel, но если это именно то, что следует из его названия, то он, вероятно, поддерживает только элементы table, и в этом случае вам может быть лучше изменить ваш div натаблицы, но это также зависит от того, может ли плагин интерпретировать данные вложенных таблиц.

Другой подход заключается в сериализации вашего HTML-кода в другой формат данных (я бы порекомендовал JSON), который можно импортировать в Excel с помощью других средств.,Я знаю множество способов добиться этого с помощью C #, но, к сожалению, я не могу намного больше помочь с использованием Javascript или JQuery.

Надеюсь, это поможет.

...