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.

Burak Güleç 1 year ago

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.

Lauris Stepanovs Author1 year ago

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

Burak Güleç 1 year ago

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/

Lauris Stepanovs Author1 year ago

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;

Burak Güleç 1 year ago

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?

Burak Güleç 1 year ago

can you please answer

Burak Güleç 1 year ago

Can you make a simple sample application in blazor. Unfortunately I couldn't do it and this is very important to me.

Lauris Stepanovs Author1 year ago

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="#%22%20class=%22menu-link%20px-3%22%20data-kt-export=%22copy" target="_blank">
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">
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">
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">
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="#%22%20class=%22text-dark%20text-hover-primary" target="_blank">Emma Smith</a>
</td>
<td>
<a href="#%22%20class=%22text-dark%20text-hover-primary" target="_blank">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

Burak Güleç 1 year ago

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);
}

Lauris Stepanovs Author1 year ago

Hi Burak Güleç,

Could you please specify which Metronic version are you using?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Burak Güleç 1 year ago

I am using version 8.1.0.

Burak Güleç 1 year ago

How will I do these processes according to this version?
Please help me.

Lauris Stepanovs Author1 year ago

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

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds

Blazor Table Export PDF,EXCEL

Replies (14)

Metronic

Products

Legal & Statements

Stay Connected

Templates byMetronic Creators

CreativeDesign Resources

We are proud towork with Experts

Blazor Table Export PDF,EXCEL

Replies (14)

Metronic

Templates by
Metronic Creators

Creative
Design Resources

We are proud to
work with Experts