Blazor 调用 Clipboard API 读写剪贴板数据

目录

• 简介
  
• 使用JS互操作
  
• 使用ClipLazor库
  
  
  
  • 创建项目
    
  • 使用方法
    
  • 简单测试
    
  
  
• 参考链接
  

简介

Clipboard API 是一种允许网页读取剪贴板数据或向其中写入数据的API，重要有两个方法：

• navigator.clipboard.writeText() ：用于将文本写入剪贴板。
  
• navigator.clipboard.readText()：用于从剪贴板读取文本。
  

网上相干的文章基本上都是直接使用 Blazor 的JS互操作特性来实现功能 ，本文除了JS互操作还介绍了使用 ClipLazor 库实现功能的方法，使用第三方库代码会更简洁一点。
使用JS互操作

JS调用 Clipboard API的代码如下，代码可以直接放到 razor 页面中：

1. [/code]在 Razor 组件中注入 JSRuntime，并调用该JS:
2. [code]@* 注入 IJSRuntime 实例，用于和 JavaScript 进行交互 *@
3. @inject IJSRuntime JsRuntime
5. // 该方法用于将文本异步复制到剪贴板
6. private async Task CopyTextToClipboard(string txt)
7. {
8.     await JsRuntime.InvokeVoidAsync("clipboardCopy.copyText", txt);
9. }

复制代码

使用ClipLazor库

ClipLazor 是一个库，它为 Blazor 应用步伐中的 Clipboard API 提供互操作，本质上是对JS互操作进行了封装。
创建项目

新建一个 Blazor Web App 项目，开辟框架选择 .NET8，在 Client 项目中通过 NuGet 添加 ClipLazor 依赖项。
在 Program.cs 文件中，使用 AddClipboard 方法将服务注册到 IoC 容器，服务端和客户端项目都必要添加：

1. using ClipLazor.Extention;
2. //...
4. builder.Services.AddClipboard();
5. //...

复制代码

在服务端项目标 App.razor 文件中添加此脚本标记：

1. [/code][size=5]使用方法[/size]
3. Blazor Web App项目模板把办理方案分成了服务端、客户端两个项目，有交互操作的页面都必要放在客户端项目中，将 Clipboard 注入到 razor 文件中：
4. [code]@using ClipLazor.Components;
5. @using ClipLazor.Enums;
6. @inject IClipLazor Clipboard

复制代码

检查浏览器是否支持 Clipboard API：

1. bool isSupported = default;
2. bool isWritePermitted = default;
3. bool isReadPermitted = default;
5. protected override async Task OnAfterRenderAsync(bool firstRender)
6. {
7.     // 静态渲染期间无法进行js互操作，所以必须在这个周期点执行
8.     if (firstRender)
9.     {
10.         isSupported = await Clipboard.IsClipboardSupported();
11.         isWritePermitted = await Clipboard.IsPermitted(PermissionCommand.Write);
12.         isReadPermitted = await Clipboard.IsPermitted(PermissionCommand.Read);
13.     }
14. }

复制代码

简单的复制粘贴文本的操作方法：

1. string msg = string.Empty;
2. string txt = string.Empty;
3. string pastedTxt = string.Empty;
5. async void CopyTxt(string txt)
6. {
7.     if (txt.Length > 0 && isSupported)
8.     {
9.         if (isWritePermitted)
10.         {
11.             var isCopied = await Clipboard.WriteTextAsync(txt.AsMemory());
12.             if (isCopied)
13.             {
14.                 msg = "Text Copied";
15.             }
16.             else
17.             {
18.                 msg = "Couldn't copy the text!.";
19.             }
20.         }
21.         StateHasChanged();
23.     }
24. }
25. async void PasteTxt()
26. {
27.     if (isSupported && isWritePermitted)
28.     {
29.         var pastedText = await Clipboard.ReadTextAsync();
30.         if (pastedText is not null)
31.         {
32.             msg = "Text Pasted";
33.             pastedTxt = pastedText;
34.         }
35.         else
36.         {
37.             msg = "Couldn't paste the text!.";
38.         }
39.     }
41.     StateHasChanged();
42. }

复制代码

实际使用时也支持复制粘贴图像或二进制文件，具体代码可以参考 ClipLazor 库的完整示例。
简单测试

以客户端项目标 Counter.razor 为例：

1. @page "/counter"
2. @rendermode InteractiveAuto
3. //代码：将 Clipboard 注入  到 razor 文件中
5. <PageTitle>Counter</PageTitle>
7. <h1>Counter</h1>
8. <p role="status">Current count: @currentCount</p>
9. <button  @onclick="IncrementCount">Click me</button>
11. <p role="status">Txt: @txt</p>
12. <p role="status">Msg: @msg</p>
13. <p role="status">PastedTxt: @pastedTxt</p>
16. @code {
18.     //代码：检查浏览器是否支持 Clipboard API
20.     private int currentCount = 0;
21.     private async void IncrementCount()
22.     {
23.         currentCount++;
24.         txt = currentCount.ToString();
25.         CopyTxt(txt);
26.         PasteTxt();
27.     }
29.     //代码：简单的复制粘贴文本的操作方法
30. }

复制代码

测试结果：

参考链接

• ClipLazor README
  
• blazor 复制笔墨到剪贴板
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。