Blazor 呼叫 Clipboard API 讀寫剪貼簿資料

二次元攻城狮發表於2024-10-14
BlazorAPI

目錄
  • 簡介
  • 使用JS互操作
  • 使用ClipLazor庫
    • 建立專案
    • 使用方法
    • 簡單測試
  • 參考連結

簡介

Clipboard API 是一種允許網頁讀取剪貼簿資料或向其中寫入資料的API，主要有兩個方法：

  • navigator.clipboard.writeText() ：用於將文字寫入剪貼簿。
  • navigator.clipboard.readText()：用於從剪貼簿讀取文字。

網上相關的文章基本上都是直接使用 Blazor 的JS互操作特性來實現功能 ，本文除了JS互操作還介紹了使用 ClipLazor 庫實現功能的方法，使用第三方庫程式碼會更簡潔一點。

使用JS互操作

JS呼叫 Clipboard API的程式碼如下，程式碼可以直接放到 razor 頁面中：

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

在 Razor 元件中注入 JSRuntime，並呼叫該JS:

@* 注入 IJSRuntime 例項，用於和 JavaScript 進行互動 *@
@inject IJSRuntime JsRuntime

// 該方法用於將文字非同步複製到剪貼簿
private async Task CopyTextToClipboard(string txt)
{
    await JsRuntime.InvokeVoidAsync("clipboardCopy.copyText", txt);
}

使用ClipLazor庫

ClipLazor 是一個庫，它為 Blazor 應用程式中的 Clipboard API 提供互操作，本質上是對JS互操作進行了封裝。

建立專案

新建一個 Blazor Web App 專案，開發框架選擇 .NET8，在 Client 專案中透過 NuGet 新增 ClipLazor 依賴項。

在 Program.cs 檔案中，使用 AddClipboard 方法將服務註冊到 IoC 容器，服務端和客戶端專案都需要新增：

using ClipLazor.Extention;
//...

builder.Services.AddClipboard();
//...

在服務端專案的 App.razor 檔案中新增此指令碼標記：

<script src="_content/ClipLazor/clipboard.min.js"></script>

使用方法

Blazor Web App專案模板把解決方案分成了服務端、客戶端兩個專案，有互動操作的頁面都需要放在客戶端專案中，將 Clipboard 注入到 razor 檔案中：

@using ClipLazor.Components;
@using ClipLazor.Enums;
@inject IClipLazor Clipboard

檢查瀏覽器是否支援 Clipboard API：

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

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    // 靜態渲染期間無法進行js互操作，所以必須在這個週期點執行
    if (firstRender)
    {
        isSupported = await Clipboard.IsClipboardSupported();
        isWritePermitted = await Clipboard.IsPermitted(PermissionCommand.Write);
        isReadPermitted = await Clipboard.IsPermitted(PermissionCommand.Read);
    }
}

簡單的複製貼上文字的操作方法：

string msg = string.Empty;
string txt = string.Empty;
string pastedTxt = string.Empty;

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

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

    StateHasChanged();
}

實際使用時也支援複製貼上影像或二進位制檔案，具體程式碼可以參考 ClipLazor 庫的完整示例。

簡單測試

以客戶端專案的 Counter.razor 為例：

@page "/counter"
@rendermode InteractiveAuto
//程式碼：將 Clipboard 注入  到 razor 檔案中

<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 {

    //程式碼：檢查瀏覽器是否支援 Clipboard API

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

    //程式碼：簡單的複製貼上文字的操作方法
}

測試結果：
image

參考連結

  • ClipLazor README
  • blazor 複製文字到剪貼簿

相關文章