How to copy content from Blazor Pivot Table to clipboard?
Introduction
In certain situations, you may want to copy the contents of a Blazor Pivot Table to the clipboard. This feature can be particularly useful for copying the data for use in other applications such as Excel or text files. You can achieve this by using JavaScript Interop with an external button click. In this article, we will guide you through the process with a step-by-step example.
Step-by-step implementation
Step 1: JavaScript Interop for copying the content to clipboard
First, you need to create a JavaScript file (i.e., clipboard.js) and define the copyToClipboard asynchronous function that processes the clipboard operation. This function takes the ID of the pivot table as a parameter to identify the table within the DOM (Document Object Model).
[Clipboard.js]
async function copyToClipboard(ID) {
try {
var text = "";
//To get the pivot table element by using it's ID
var Element = document.getElementById(ID);
//Here we get the column headers
var cl = Element.getElementsByClassName("e-columnheader");
for (var i = 0; i < cl.length; i++)
{
if (i != 0) {
var inner = "\t\t";
for (var j = 0; j < cl[i].children.length; j++) {
inner += cl[i].children[j].innerText;
for (var x = 0; x < cl[i].children[j].ariaColSpan; x++) {
inner+= "\t ";
}
}
}
// Here we frame the column headers as text string
text = text + inner + '\n';
}
}
var cls = Element.getElementsByClassName("e-table");
// Here we retrieve the table values
var tablecontent = cls[cls.length - 1].innerText.replace(/\t/g, '\t\t');
var linesArray = tablecontent.split('\n');
// Here we retrieve the row headers
var rowArray = cls[cls.length - 2].innerText.split('\n');
for (var k = 0; k < linesArray.length; k++) {
// Here we frame the row headers and table values as text string along with column headers
if (rowArray[k].length > 8) {
text = text + rowArray[k] + '\t' + linesArray[k] + '\n';
}
else {
text = text + rowArray[k] + '\t\t' + linesArray[k] + '\n';
}
}
await navigator.clipboard.writeText(text);
} catch (err) {
console.error("Unable to copy text to clipboard:", err);
}
}
In this function, the provided ID is used to retrieve the pivot table element. We then extract all the column headers, table values, and row headers from the same element by accessing their respective class names(i.e., e-columnheader and e-table) through the getElementsByClassName method. The retrieved table content is subsequently formatted as a text string. Finally, the constructed text is written into the clipboard using the navigator.clipboard.writeText method.
Step 2: Include the script in your host file
To use JavaScript Interop in a Blazor application, you need to refer to the JavaScript file (i.e., clipboard.js) in your host file (i.e., Host.cshtml). Below is an example of how to refer to the JavaScript file in your host page.
[Host.cshtml]
<html>
<body>
// Here we refered the clipboard script file
<script src="scripts/clipboard.js"></script>
</body>
</html>
Step 3: Invoke JavaScript function in Blazor
Once your JavaScript Interop is set up, you can invoke the copyToClipboard function in your Blazor file (Index.razor) by clicking an external button. This action will copy the content of the pivot table to your system clipboard. It’s important to note that the copied content will be in a table structure, similar to the original pivot table.
Below is an example of how to call the copyToClipboard method in your razor file.
[Index.razor]
@inject IJSRuntime JSRuntime
<sfbutton> Copy Data </sfbutton>
<sfpivotview id="@ID" @ref="pivot">
</sfpivotview>
@code {
private string ID= "Pivot";
private async Task Copy()
{
// Here we called the copyToClipboard method
await JSRuntime.InvokeVoidAsync("copyToClipboard",ID);
}
}
In the code snippet above, we used IJSRuntime interface to invoke the JavaScript copyToClipboard method from a Blazor application.
The following screenshot portrays the results of the code snippet mentioned above,
Screenshot
Conclusion
I hope you enjoyed learning how to copy content from Blazor Pivot Table to clipboard
You can also refer to our Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Pivot Table example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
