export excel

This commit is contained in:
2024-09-30 16:09:29 +05:45
parent 60f4c75eb0
commit 4683fe67a7
21 changed files with 889 additions and 408 deletions

View File

@ -56,9 +56,16 @@
</div>
</div>
<div class="btn-group">
<button type="submit" class="btn btn-warning btn-sm " data-toggle="dropdown" data-offset="-52">
Export
<button type="submit" id="downloadCsv" class="btn btn-warning btn-sm ">
Export csv
</button>
<!-- <button id="exportButton">Export to Excel</button> -->
<!-- <button class="btn btn-warning btn-sm " id="downloadBtn">Download CSV</button> -->
<!-- <button type="submit" class="btn btn-warning btn-sm " data-toggle="dropdown" data-offset="-52">
Export
</button> -->
<!-- <div class="dropdown-menu" role="menu">
<a href="#" class="dropdown-item">Export</a>
<a href="#" class="dropdown-item">Pdf</a>
@ -67,7 +74,7 @@
</div> -->
</div>
<!-- <button class="btn btn-secondary toggle-collapse btn-sm" id="toggleShowAll">Toggle Collapse</button> -->
<button class="btn btn-secondary toggle-collapse btn-sm" id="toggleShowAll">Toggle Collapse</button>
</form>
<script>
function resetForm() {
@ -107,7 +114,7 @@
<?php
$html = "";
$html .= "<table class='table table-bordered table-striped longdataTable'>";
$html .= "<table id='myTable' class='table table-bordered table-striped longdataTable'>";
$html .= "<thead>";
$html .= "<tr><th class='text-center' width='25'>Sn</th><th class='text-center'>Account</th><th class='text-center'>Account Group</th><th class='text-center'>Dr</th><th class='text-center'>Cr</th><th class='text-center'>Balance</th><th class='text-center col-1'>Action</th></tr>";
$html .= "</thead><tbody>";
@ -167,71 +174,109 @@
});
});
</script>
<script>
// var exportButton = document.getElementById("exportButton");
// exportButton.addEventListener("click", function() {
// exportTableToCSV("table.csv");
// });
document.addEventListener("DOMContentLoaded", function() {
// Trigger click event on page load
document.getElementById("toggleShowAll").click();
});
document.getElementById("toggleShowAll").addEventListener("click", function(e) {
e.preventDefault();
var nestedRows = document.getElementsByClassName("collapse");
for (var i = 0; i < nestedRows.length; i++) {
if (nestedRows[i].classList.contains("show")) {
nestedRows[i].classList.remove("show");
} else {
nestedRows[i].classList.add("show");
}
<script>
// var exportButton = document.getElementById("exportButton");
// exportButton.addEventListener("click", function() {
// exportTableToCSV("table.csv");
// });
document.addEventListener("DOMContentLoaded", function() {
// Trigger click event on page load
document.getElementById("toggleShowAll").click();
});
document.getElementById("toggleShowAll").addEventListener("click", function(e) {
e.preventDefault();
var nestedRows = document.getElementsByClassName("collapse");
for (var i = 0; i < nestedRows.length; i++) {
if (nestedRows[i].classList.contains("show")) {
nestedRows[i].classList.remove("show");
} else {
nestedRows[i].classList.add("show");
}
}
});
function exportTableToCSV(filename) {
var csv = [];
var rows = document.querySelectorAll("table tr:not(.hide)");
for (var i = 0; i < rows.length; i++) {
var row = [];
var cols = rows[i].querySelectorAll("td:not(.hide), th:not(.hide)");
// Check if the parent row is collapsed or hidden
var parentRow = rows[i].closest(".collapse");
var isParentCollapsed = parentRow && (!parentRow.classList.contains("show"));
if (isParentCollapsed) {
continue; // Skip child table rows if parent is collapsed
}
for (var j = 0; j < cols.length; j++) {
var cellValue = cols[j].innerText.replace(/,/g, ""); // Remove commas from the cell value
row.push(cellValue);
}
csv.push(row.join(","));
}
// Create a CSV file
var csvContent = "data:text/csv;charset=utf-8," + csv.join("\n");
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", filename);
document.body.appendChild(link);
link.click();
}
</script>
<script>
$("#fromDate").nepaliDatePicker({
dateFormat: "%y-%m-%d",
closeOnDateSelect: true,
minDate: $('#fromDate').data('start'),
maxDate: $('#fromDate').data('end'),
});
</script>
<script>
$("#toDate").nepaliDatePicker({
dateFormat: "%y-%m-%d",
closeOnDateSelect: true,
minDate: $('#toDate').data('start'),
maxDate: $('#toDate').data('end'),
});
</script>
<!-- pdf document -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script>
document.getElementById('downloadCsv').addEventListener('click', function() {
const table = document.getElementById('myTable');
const rows = Array.from(table.rows);
const data = [];
rows.forEach((row) => {
const cells = Array.from(row.cells);
const rowData = [];
cells.forEach((cell) => {
// Handle colspan
const colspan = cell.colSpan || 1;
for (let i = 0; i < (colspan - 1); i++) {
rowData.push(''); // Fill empty cells for merged columns
}
for (let i = 0; i < 1; i++) {
rowData.push(cell.innerText.trim());
}
// Fill empty cells for colspan
});
data.push(rowData);
});
function exportTableToCSV(filename) {
var csv = [];
var rows = document.querySelectorAll("table tr:not(.hide)");
for (var i = 0; i < rows.length; i++) {
var row = [];
var cols = rows[i].querySelectorAll("td:not(.hide), th:not(.hide)");
// Check if the parent row is collapsed or hidden
var parentRow = rows[i].closest(".collapse");
var isParentCollapsed = parentRow && (!parentRow.classList.contains("show"));
if (isParentCollapsed) {
continue; // Skip child table rows if parent is collapsed
}
for (var j = 0; j < cols.length; j++) {
var cellValue = cols[j].innerText.replace(/,/g, ""); // Remove commas from the cell value
row.push(cellValue);
}
csv.push(row.join(","));
}
// Create a CSV file
var csvContent = "data:text/csv;charset=utf-8," + csv.join("\n");
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", filename);
document.body.appendChild(link);
link.click();
}
</script>
<script>
$("#fromDate").nepaliDatePicker({
dateFormat: "%y-%m-%d",
closeOnDateSelect: true,
minDate: $('#fromDate').data('start'),
maxDate: $('#fromDate').data('end'),
});
</script>
<script>
$("#toDate").nepaliDatePicker({
dateFormat: "%y-%m-%d",
closeOnDateSelect: true,
minDate: $('#toDate').data('start'),
maxDate: $('#toDate').data('end'),
});
</script>
// Create a worksheet
const worksheet = XLSX.utils.aoa_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// Export to Excel
XLSX.writeFile(workbook, 'table.xlsx');
});
</script>
<!-- pdf document ends-->
<?php
}
?>