Blazor Table Export PDF,EXCEL
How can I export the data in the HTML Table to pdf and excel.
Replies (17)
To export data from an HTML table to PDF and Excel, there are several practical methods depending on whether you're working with plain HTML/JavaScript or using a backend framework.
For Excel export:
You can use JavaScript libraries like SheetJS (xlsx.js), which lets you extract HTML table data and convert it into .xlsx format easily with just a few lines of code. Here's a basic example:
html
Copy
Edit
<button onclick="exportTableToExcel()">Export to Excel</button>
<script>
function exportTableToExcel() {
var table = document.getElementById("yourTableID");
var workbook = XLSX.utils.table_to_book(table, {sheet: "Sheet1"});
XLSX.writeFile(workbook, 'table_data.xlsx');
}
</script>
For PDF export:
You can use jsPDF along with the autoTable plugin to convert an HTML table into a styled, printable PDF:
html
Copy
Edit
<button onclick="exportTableToPDF()">Export to PDF</button>
<script>
function exportTableToPDF() {
const doc = new jsPDF();
doc.autoTable({ html: '#yourTableID' });
doc.save('table_data.pdf');
}
</script>
Alternatively, for users looking for a simple desktop solution, Corel PDF Fusion
is a powerful tool that lets you create, edit, and combine PDF files from various formats including HTML and Excel. You can save your table as an HTML or Excel file, then easily convert it to PDF using Corel PDF Fusion with drag-and-drop convenience.
Whether you choose a coding-based method or a software solution like Corel PDF Fusion, exporting HTML table data is straightforward and flexible depending on your needs.
Get corel pdf fusion:
Interesting use case! While working on a birthday greeting layout in Marathi for a family blog, I had to export content into both PDF and Excel formats for print and sharing. I used a lightweight script for PDF export and linked it with localized content from marathibirthdaywish.com—it kept the fonts and formatting nicely intact.
Exporting an HTML table to PDF and Excel in Blazor can be done using libraries like Syncfusion, iTextSharp, or jsPDF for PDFs and EPPlus for Excel. You might need to format the data properly before exporting to maintain readability. Hope this helps! By the way, if you ever need to send birthday wishes in Marathi, you might find this website useful: Just thought I’d share in case it comes in handy.
Hi,
Could you please provide more info? Which Metronic version are you using? Are you using your own Blazor code or Metronic's Blazor starter kit? Do you need server-side pdf/excel generation or frontend? For frontend export, you can check the datatables's frontend here.
Regards.
Yes. I need exactly this. How can I do it in Blazor app. I'm using the Metronic Blazor starter kit.
https://preview.keenthemes.com/html/metronic/docs/general/datatables/buttons/export?_ga=2.14629120.1620477383.1676242383-2106446905.1669624510
How can I use the functions in the link you sent on blazor? How can I access their codes.
Kind regards.
Hi,
In our documentation under the example, you should have a code preview with the example source HTML and javascript code. You can copy HTML code to your view and include javascript code.
Then inside your view, you can initialize Javascript with the code below.
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender){
await JS.InvokeVoidAsync("KTDatatablesExample.init");
}
}
}Regards,
Lauris Stepanovs,
Keenthemes Support Team
I really didn't understand anything.
How can I export the data in the html table as pdf and excel.
can you send sample code/
Hi,
Here is JavaScript which you can use for export functionality.
var KTDatatablesExample = function () {
// Shared variables
var table;
var datatable;
// Private functions
var initDatatable = function () {
// Set date data order
const tableRows = table.querySelectorAll("tbody tr");
tableRows.forEach(row => {
const dateRow = row.querySelectorAll("td");
const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
dateRow[3].setAttribute("data-order", realDate);
});
// Init datatable --- more info on datatables:
datatable = $(table).DataTable({
"info": false,
"order": [],
"pageLength": 10,
});
}
// Hook export buttons
var exportButtons = () => {
const documentTitle = "Customer Orders Report";
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [
{
extend: "copyHtml5",
title: documentTitle
},
{
extend: "excelHtml5",
title: documentTitle
},
{
extend: "csvHtml5",
title: documentTitle
},
{
extend: "pdfHtml5",
title: documentTitle
}
]
}).container().appendTo($("#kt_datatable_example_buttons"));
// Hook dropdown menu click event to datatable export buttons
const exportButtons = document.querySelectorAll("#kt_datatable_example_export_menu [data-kt-export]");
exportButtons.forEach(exportButton => {
exportButton.addEventListener("click", e => {
e.preventDefault();
// Get clicked export value
const exportValue = e.target.getAttribute("data-kt-export");
const target = document.querySelector(".dt-buttons .buttons-" + exportValue);
// Trigger click event on hidden datatable export buttons
target.click();
});
});
}
// Search Datatable --- official docs reference:
var handleSearchDatatable = () => {
const filterSearch = document.querySelector("[data-kt-filter="search"]");
filterSearch.addEventListener("keyup", function (e) {
datatable.search(e.target.value).draw();
});
}
// Public methods
return {
init: function () {
table = document.querySelector("#kt_datatable_example");
if ( !table ) {
return;
}
initDatatable();
exportButtons();
handleSearchDatatable();
}
};
}();
window.KTDatatablesExample = KTDatatablesExample;Thank you. So how do I create a pdf, excel etc. file when I press the button in html? Can you share the Blazor html example?
can you please answer
Can you make a simple sample application in blazor. Unfortunately I couldn't do it and this is very important to me.
Hi,
Sorry for the delay in reply.
Fort of all, you need to include datatable styles and js files. You can add them globally in Starterkit/themesettings.json, by expanding Assets.Js and Assets.Css arrays as shown below.
"Css" : [
"plugins/global/plugins.bundle.css",
"css/style.bundle.css",
"plugins/custom/datatables/datatables.bundle.css"
],
"Js" : [
"plugins/global/plugins.bundle.js",
"js/scripts.bundle.js",
"plugins/custom/datatables/datatables.bundle.js"
]Then you can create file in _keenthemes/src/js/custom and pase the following code.
_keenthemes/src/js/custom/example.js
"use strict";
// Class definition
var KTDatatablesExample = (function () {
// Shared variables
var table;
var datatable;
// Private functions
var initDatatable = function () {
// Set date data order
const tableRows = table.querySelectorAll("tbody tr");
tableRows.forEach((row) => {
const dateRow = row.querySelectorAll("td");
const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
dateRow[3].setAttribute("data-order", realDate);
});
// Init datatable --- more info on datatables:
datatable = $(table).DataTable({
info: false,
order: [],
pageLength: 10,
});
};
// Hook export buttons
var exportButtons = () => {
const documentTitle = "Customer Orders Report";
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [
{
extend: "copyHtml5",
title: documentTitle,
},
{
extend: "excelHtml5",
title: documentTitle,
},
{
extend: "csvHtml5",
title: documentTitle,
},
{
extend: "pdfHtml5",
title: documentTitle,
},
],
})
.container()
.appendTo($("#kt_datatable_example_buttons"));
// Hook dropdown menu click event to datatable export buttons
const exportButtons = document.querySelectorAll(
"#kt_datatable_example_export_menu [data-kt-export]"
);
exportButtons.forEach((exportButton) => {
exportButton.addEventListener("click", (e) => {
e.preventDefault();
// Get clicked export value
const exportValue = e.target.getAttribute("data-kt-export");
const target = document.querySelector(
".dt-buttons .buttons-" + exportValue
);
// Trigger click event on hidden datatable export buttons
target.click();
});
});
};
// Search Datatable --- official docs reference:
var handleSearchDatatable = () => {
const filterSearch = document.querySelector("[data-kt-filter="search"]");
filterSearch.addEventListener("keyup", function (e) {
datatable.search(e.target.value).draw();
});
};
// Public methods
return {
init: function () {
table = document.querySelector("#kt_datatable_example");
if (!table) {
return;
}
initDatatable();
exportButtons();
handleSearchDatatable();
},
};
})();
window.KTDatatablesExample = KTDatatablesExample;Then create a new razor view page and paste the following code.
@using Starterkit._keenthemes.libs;
@inject IKTTheme KTTheme;
@inject IJSRuntime JS
@page "/your-page-path"
<script suppress-error="BL9992" src="@KTTheme.GetAssetPath("js/custom/example.js")"></script>
<div class="card card-p-0 card-flush">
<div class="card-header align-items-center py-5 gap-2 gap-md-5">
<div class="card-title">
<div class="d-flex align-items-center position-relative my-1">
<input type="text" data-kt-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="Search Report" />
</div>
<div class="d-none"></div>
</div>
<div class="card-toolbar flex-row-fluid justify-content-end gap-5">
<button type="button" class="btn btn-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
Export Report
</button>
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-200px py-4" data-kt-menu="true">
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-export=%22copy" target="_blank" rel="noopener noreferrer">
Copy to clipboard
</a>
</div>
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-export=%22excel" target="_blank" rel="noopener noreferrer">
Export as Excel
</a>
</div>
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-export=%22csv" target="_blank" rel="noopener noreferrer">
Export as CSV
</a>
</div>
<div class="menu-item px-3">
<a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-export=%22pdf" target="_blank" rel="noopener noreferrer">
Export as PDF
</a>
</div>
</div>
<div class="d-none"></div>
</div>
</div>
<div class="card-body">
<table class="table align-middle border rounded table-row-dashed fs-6 g-5" >
<thead>
<tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase">
<th class="min-w-100px">Customer Name</th>
<th class="min-w-100px">Email</th>
<th class="min-w-100px">Status</th>
<th class="min-w-100px">Date Joined</th>
<th class="text-end min-w-75px">No. Orders</th>
<th class="text-end min-w-75px">No. Products</th>
<th class="text-end min-w-100px pe-5">Total</th>
</tr>
</thead>
<tbody class="fw-semibold text-gray-600">
<tr class="odd">
<td>
Emma Smith
</td>
<td>
e.smith@kpmg.com.au
</td>
<td>
<div class="badge badge-light-success">Active</div>
</td>
<td data-order="2022-03-10T14:40:00+05:00">10 Mar 2022, 2:40 pm</td>
<td class="text-end pe-0">94</td>
<td class="text-end pe-0">103</td>
<td class="text-end">$500.00</td>
</tr>
</tbody>
</table>
</div>
</div>
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender){
await JS.InvokeVoidAsync("KTDatatablesExample.init");
}
}
}Regards,
Lauris Stepanovs,
Keenthemes Support Team
I tried to do what you said but it didn't work.
1)
Starterkit/themesettings.json, I couldn't find the file named.
2)
There is no GetAssetPath method in the IKTThemeinterface.
public interface IKTTheme
{
void addHtmlAttribute(string scope, string attributeName, string attributeValue);
void addHtmlClass(string scope, string className);
string printHtmlAttributes(string scope);
string printHtmlClasses(string scope);
string getImageUrl(string path);
string getSvgIcon(string path, string classNames);
void setModeSwitch(bool flag);
bool isModeSwitchEnabled();
void setModeDefault(string flag);
string getModeDefault();
void setDirection(string direction);
string getDirection();
bool isRtlDirection();
string getAssetsFullPath(string path);
string extendCssFilename(string path);
string getFavicon();
string[] getFonts();
string[] getGlobalAssets(String type);
string getAttributeValue(string scope, string attributeName);
}
Hi Burak Güleç,
Could you please specify which Metronic version are you using?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I am using version 8.1.0.
How will I do these processes according to this version?
Please help me.
Hi,
In previous versions, we had these configuration properties inside a Starterkit/appsettings.Development.json.
You can add this function to KTTheme class by referring to the latest version or alternatively you can just use your full path for scripts href.
<script suppress-error="BL9992" src="/assets/js/custom/example.js"></script>Regards,
Lauris Stepanovs,
Keenthemes Support Team
