How to Copy Content from Blazor Grid 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, 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 retrieves the pivot table element. The function 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, refer to the JavaScript file (i.e., clipboard.js) in the 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>
// Refer the clipboard script file
<script src="scripts/clipboard.js"></script>
</body>
</html>
Step 3: Invoke JavaScript function in Blazor
Once JavaScript Interop is set up, invoke the copyToClipboard function in the 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 appears in a table structure, similar to the original pivot table.
Below is an example of how to call the copyToClipboard method in a razor file.
[Index.razor]
@inject IJSRuntime JSRuntime
<SfButton OnClick="Copy" > Copy Data </SfButton>
<SfPivotView ID="@ID" @ref="pivot" TValue="ProductDetails" Height="300" ShowFieldList="true">
</SfPivotView>
@code {
private string ID= "Pivot";
private async Task Copy()
{
// Call the copyToClipboard method.
await JSRuntime.InvokeVoidAsync("copyToClipboard",ID);
}
}
In the code snippet above, the IJSRuntime interface invokes the JavaScript copyToClipboard method from a Blazor application.
The following screenshot portrays the results of the code snippet mentioned above,
Screenshot
Conclusion
We 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 features, documentation, and how to quickly get started with configuration specifications. You can also explore our Pivot Table example to understand how to create and manipulate data.
For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Pivot Table and other Blazor components.
If you have any questions 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!
