Blazor 调用 Clipboard API 读写剪贴板数据
简介
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项目模板使用的是.NET 8 中新引入的 Blazor Auto 渲染模式,它把解决方案分成了服务端、客户端两个项目,有交互操作的页面都放在客户端项目中。
将 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();
}
//代码:简单的复制粘贴文本的操作方法
}
测试结果:
参考链接
Blazor 调用 Clipboard API 读写剪贴板数据的更多相关文章
- 使用Python调用Flickr API抓取图片数据
Flickr是雅虎旗下的图片分享网站,上面有全世界网友分享的大量精彩图片,被认为是专业的图片网站.其API也很友好,可以实现多种功能.这里我使用了Python调用其API获得了大量的照片数据.需要注意 ...
- Java调用yahoo!API获取天气数据
先把代码复制上来,以后再做补充 package com.weather.test; import java.io.InputStream; import java.net.URL; import ja ...
- Dynamics 365 CE的插件/自定义工作流活动中调用Web API示例代码
微软动态CRM专家罗勇 ,回复325或者20190428可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 现在Web API越来越流行,有时候为了程序更加健壮,需要在插件 ...
- Linux C 调用MYSQL API 函数mysql_escape_string()转义插入数据
Title:Linux C 调用MYSQL API 函数mysql_escape_string()转义插入数据 --2013-10-11 11:57 #include <stdio.h> ...
- [置顶]
Xamarin android 调用Web Api(ListView使用远程数据)
xamarin android如何调用sqlserver 数据库呢(或者其他的),很多新手都会有这个疑问.xamarin android调用远程数据主要有两种方式: 在Android中保存数据或调用数 ...
- Xamarin.Android 调用Web Api(通过ListView展示远程获取的数据)
xamarin.android如何调用sqlserver 数据库呢(或者其他的),很多新手都会有这个疑问.xamarin.android调用远程数据主要有两种方式: 在Android中保存数据或调用数 ...
- RandomAccessFile(),读写文件数据的API,以及复制文件操作
package seday03;import java.io.File;import java.io.RandomAccessFile; import java.io.IOException; /** ...
- 调用免费API查询全年工作日、周末、法定节假日、节假日调休补班数据
前言 日常开发中,难免会用到判断今天是工作日.周末.法定节假日.节假日调休补班做一些业务处理,例如:仅在上班时间给用户推送消息.本文记录调用免费API查询全年工作日.周末.法定节假日.节假日调休补班数 ...
- 【WP开发】读写剪贴板
在WP 8.1中只有Silverlight App支持操作剪贴板的API,Runtime App并不支持.不过,在WP 10中也引入了可以操作剪贴板的API. 顺便说点题外话,有人会说,我8.1的开发 ...
- IO流-文本IO\读写二进制数据
文本IO 一.简述 OutputStreamWriter类使用选定的编码方式吧Unicode字符流转换为字节流,InputStreamReader类将包含字节的输入流转为可以产生Unicode字符的读 ...
随机推荐
- Google的TPU的逐元素操作特性 —— TPU数据操作时最基本的操作原语(primitive)
地址: https://jax.readthedocs.io/en/latest/pallas/tpu.html TPU是原来进行矩阵计算加速的一个科学计算的设备,功能大致等同于NVIDIA的GPU的 ...
- vscode中使用ssh进行远程项目开发时无法连接远端服务器——如何解决
找到vscode中的ssh扩展(Visual Studio Code Remote - SSH),然后卸载,再重新安装,即可解决. PS: 重新安装时需要较长时间的等待. ============== ...
- 学历史有什么用——视频分享:學歷史的大用:呂世浩(Shih-Hao Lu) at TEDxTaipei 2014
网上看到的不错的视频: https://www.youtube.com/watch?v=Ap0w3PgSK7g ============================================ ...
- 《最新出炉》系列小成篇-Python+Playwright自动化测试-66 - 等待元素至指定状态(出现、移除、显示和隐藏)
1.简介 在我们日常工作中进行UI自动化测试时,保证测试的稳定性至关重要.其中一个关键方面是正确地定位和操作网页中的元素.在网页中,元素可能处于不同的状态,有些可能在页面加载完成之前不在DOM中,需要 ...
- Digest Auth 摘要认证
1.该代码展示了使用Apache HttpClient库进行HTTP请求,并处理基于MD5的HTTP Digest认证的过程. Digests类实现了MD5加密算法,HttpUtils类处理了GET. ...
- 关于捣鼓Gentoo的一些见解
现在很少有人使用gentoo,大家对它的印象都是一个很难用的系统,我想给大家讲讲折腾Gentoo一年的心得,仅供参考 使用archlinux安装盘,genfstab生成fstab 使用gentoo-k ...
- PyJWT 和 python-jose 在处理JWT令牌处理的时候的差异和具体使用
PyJWT 和 python-jose 是两个用于处理 JSON Web Tokens (JWT) 的 Python 库.它们都有助于生成.解码.验证和管理 JWT,但它们在功能范围和设计哲学上有一些 ...
- CSS学习(一)CSS和文档
应用样式的三种方式 外部样式表(link.@import) 嵌入式样式表(<style></style>) 行内样式 (html元素的属性为style的值作为样式) CSS的空 ...
- Linux 检查端口监听情况
使用 lsof $ sudo lsof -i :22 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME sshd 963 root 3u IPv4 ...
- Gmail 别名
Gmail 有一个很少人知道但是非常实用的功能,那就是别名.Gmail 允许用户通过在基本邮箱地址中添加特定符号和文本来创建多个别名.这些别名都指向同一个 Gmail 账户,方便用户进行邮件管理.过滤 ...