.NET MAUI Hybrid Blazor中实现复制到剪贴板的方法

核心实现思路 #

MAUI Hybrid的Blazor页面可以通过JS互操作+MAUI原生剪贴板API的组合实现跨平台剪贴板功能，这种方案兼顾了Blazor的Web开发体验和MAUI原生API的跨平台兼容性。

具体实现步骤 #

1. 确认剪贴板服务注册 #

MAUI模板默认已注册剪贴板服务，可在MauiProgram.cs中确认：

builder.Services.AddSingleton<IClipboard>(Clipboard.Default);

2. 封装剪贴板操作服务 #

新建ClipboardService.cs类，封装原生剪贴板的核心操作，方便Blazor组件调用：

using Microsoft.Maui.ApplicationModel.DataTransfer;

public class ClipboardService
{
    private readonly IClipboard _clipboard;

    public ClipboardService(IClipboard clipboard)
    {
        _clipboard = clipboard;
    }

    /// <summary>
    /// 复制文本到剪贴板
    /// </summary>
    public async Task CopyTextAsync(string text)
    {
        if (!_clipboard.IsSupported)
            throw new NotSupportedException("当前平台不支持剪贴板操作");
        
        await _clipboard.SetTextAsync(text);
    }

    /// <summary>
    /// 从剪贴板读取文本
    /// </summary>
    public async Task<string?> GetTextAsync()
    {
        if (!_clipboard.IsSupported)
            return null;
        
        return await _clipboard.GetTextAsync();
    }
}

完成后在MauiProgram.cs注册该服务：

builder.Services.AddSingleton<ClipboardService>();

3. Blazor页面调用服务 #

在Blazor组件中注入服务，添加复制功能的UI和逻辑：

@inject ClipboardService ClipboardService
@page "/copy-demo"

<h3>剪贴板复制演示</h3>

<input type="text" @bind="_textToCopy" placeholder="输入要复制的内容" style="margin-right:8px;" />
<button @onclick="HandleCopy" class="btn btn-primary">复制到剪贴板</button>

@code {
    private string _textToCopy = "默认测试内容";

    private async Task HandleCopy()
    {
        try
        {
            await ClipboardService.CopyTextAsync(_textToCopy);
            // 可添加复制成功提示（如Blazor Toast组件）
        }
        catch (Exception ex)
        {
            // 处理复制失败场景，比如给用户弹窗提示
        }
    }
}

4. 极简替代方案：纯JS互操作 #

如果仅需在Web视图环境生效，也可直接调用浏览器剪贴板API：

@page "/js-copy"
@inject IJSRuntime JsRuntime

<input type="text" @bind="_text" />
<button @onclick="CopyWithJs">用JS复制</button>

@code {
    private string _text = "JS测试文本";

    private async Task CopyWithJs()
    {
        await JsRuntime.InvokeVoidAsync("navigator.clipboard.writeText", _text);
    }
}

平台权限注意事项 #

• Android 10+：需在AndroidManifest.xml中添加权限：

  <uses-permission android:name="android.permission.READ_CLIPBOARD_IN_BACKGROUND" />
  <uses-permission android:name="android.permission.WRITE_CLIPBOARD_IN_BACKGROUND" />
  

• Windows/macOS/iOS：默认已开启剪贴板访问权限，无需额外配置。

内容的提问来源于stack exchange，提问作者Matt S.