クリップボードへテキストをコピーする (Blazor Web App)

はじめに

この記事の使用例は以下を下敷きにしていますが、実装はMudBlazorに依存するものではありません。

https://zenn.dev/tetr4lab/articles/74bd50585434ab

やりたいこと

アプリから値を取り出す手段のひとつとして、クリップボードを経由する方法が考えられます。
「ボタンを押すと、動的に生成されたテキストがクリップボードにコピーされる」ようなシナリオです。

実装

IJSRuntimeごしに、ブラウザAPIを使います。

https://github.com/tetr4lab/Tetr4labNugetPackages/blob/main/Tetr4labRazor/JSRuntimeHelper.cs

https://learn.microsoft.com/ja-jp/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0

https://developer.mozilla.org/ja/docs/Web/API/Clipboard/writeText

使用例

@using Microsoft.JSInterop
@using Tetr4lab

@inject IJSRuntime JSRuntime

<MudTable Items="items" Dense Bordered Breakpoint="Breakpoint.Xs" @ref="_table" >
    <RowTemplate>
        <MudTd Class="align-right" DataLabel="@(Payment.Label [nameof (Payment.PaymentAmount)])">
            <MudTooltip Text="支払報告をクリップボードにコピー" Duration="1000">
                <MudIconButton OnClick="@(async () => await CopyToClipboard (context.DividendSummary, "支払報告"))" Icon="@Icons.Material.Outlined.ContentCopy" Size="MudBlazor.Size.Small" />
            </MudTooltip>
            @($"¥{context.PaymentAmount:#,0}")
        </MudTd>
    </RowTemplate>
</MudTable>

@code {
    /// <summary>クリップボードへコピー</summary>
    protected async Task CopyToClipboard (string text, string? name = null) {
        await JSRuntime.CopyToClipboard (text);
        Snackbar.Add ($"{(name is null ? "" : $"{name}を")}クリップボードにコピーしました。", Severity.Normal);
    }
}

おわりに

お読みいただきありがとうございました。
執筆者は、Blazor、ASP.NET、PetaPocoなど諸々において初学者ですので、誤りもあるかと思います。
お気づきの際は、是非コメントや編集リクエストにてご指摘ください。
あるいは、「それでも解らない」、「自分はこう捉えている」などといった、ご意見、ご感想も歓迎いたします。