Blazor Table Export PDF,EXCEL
How can I export the data in the HTML Table to pdf and excel.
Replies (14)
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: https://datatables.net/manual/
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: https://datatables.net/reference/api/search()
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: https://datatables.net/manual/
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: https://datatables.net/reference/api/search()
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="#" class="menu-link px-3" data-kt-export="copy">
Copy to clipboard
</a>
</div>
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-kt-export="excel">
Export as Excel
</a>
</div>
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-kt-export="csv">
Export as CSV
</a>
</div>
<div class="menu-item px-3">
<a href="#" class="menu-link px-3" data-kt-export="pdf">
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>
<a href="#" class="text-dark text-hover-primary">Emma Smith</a>
</td>
<td>
<a href="#" class="text-dark text-hover-primary">e.smith@kpmg.com.au</a>
</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
