Blazor Calls Clipboard API to Read and Write Clipboard Data

synopsis

Clipboard API is an API that allows web pages to read clipboard data or write data to it in two main ways:

• () : Used to write text to the clipboard.
• (): Used to read text from the clipboard.

The articles on the web basically use Blazor's JS interoperability features directly to implement the functionality.JS InteroperabilityThe use ofClipLazor libraries to implement the functionality, using a third-party library code will be a little more concise.

Using JS Interoperability

The code for the JS call to the Clipboard API is as follows, and the code can be put directly into the razor page:

<script>
     = {
        copyText: function (text) {
            (text).then(function () {
                alert("Copied to clipboard!");
            })
                .catch(function (error) {
                    alert(error);
                });
        }
    };
</script>

Inject JSRuntime in the Razor component and call this JS:.

@* Inject an instance of IJSRuntime for interacting with JavaScript *@
@inject IJSRuntime JsRuntime

// This method is used to asynchronously copy text to the clipboard.
private async Task CopyTextToClipboard(string txt)
private async Task CopyTextToClipboard(string txt) {
    await ("", txt);
}

Using the ClipLazor library

ClipLazor is a library that creates a new set of clips for the Blazor application'sClipboard API Providing interoperability essentially encapsulates JS interoperability.

Create a project

Create a new Blazor Web App project, choose .NET8 as the development framework, and add ClipLazor dependencies via NuGet in the Client project.

exist file, use the AddClipboard method to register the service with the IoC container.Both server-side and client-side projects need to add：

using ;
//...

();
//...

In the server-side project's file to add this script tag:

<script src="_content/ClipLazor/"></script>

Usage

The Blazor Web App project template uses the newly introduced Blazor Auto rendering model in .NET 8, which splits the solution into server-side and client-side projects, with interactive pages placed in the client-side project.

Inject the Clipboard into the razor file:

@using ;
@using ;
@inject IClipLazor Clipboard

Check if your browser supports the Clipboard API:

bool isSupported = default;
bool isWritePermitted = default;
bool isReadPermitted = default;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    // Unavailable during static renderingjsinteroperability，So it must be executed at this point in the cycle
    if (firstRender)
    {
        isSupported = await ();
        isWritePermitted = await ();
        isReadPermitted = await ();
    }
}

A simple way to copy and paste text:

string msg = ;
string txt = ;
string pastedTxt = ;

async void CopyTxt(string txt)
{
    if ( > 0 && isSupported)
    {
        if (isWritePermitted)
        {
            var isCopied = await (());
            if (isCopied)
            {
                msg = "Text Copied";
            }
            else
            {
                msg = "Couldn't copy the text!.";
            }
        }           
        StateHasChanged();

    }
}
async void PasteTxt()
{
    if (isSupported && isWritePermitted)
    {
        var pastedText = await ();
        if (pastedText is not null)
        {
            msg = "Text Pasted";
            pastedTxt = pastedText;
        }
        else
        {
            msg = "Couldn't paste the text!.";
        }
    }

    StateHasChanged();
}

In practice, it also supports copying and pasting images or binary files, as described in the ClipLazor library'sFull Example。

simple test

Take the client project's As an example:

@page "/counter"
@rendermode InteractiveAuto
//coding：commander-in-chief (military) Clipboard pour into until (a time) razor Papers

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<p role="status">Txt: @txt</p>
<p role="status">Msg: @msg</p>
<p role="status">PastedTxt: @pastedTxt</p>


@code {

    //coding：Check if your browser supports Clipboard API

    private int currentCount = 0;
    private async void IncrementCount()
    {
        currentCount++;
        txt = ();
        CopyTxt(txt);
        PasteTxt();
    }

    //coding：A simple way to copy and paste text
}

Test results:

Reference Links

• ClipLazor README