业务要求,一个二维码图片,点击一个按钮复制。粘贴时粘贴一个图片出来而不是一个链接
const onCopy = async (url: string) => {
// url为线上图片链接
const response = await fetch(url);
// 确保请求成功
if (!response.ok) {
throw new Error('Image fetch failed');
}
// 将响应体读取为Blob
const blob = await response.blob();
const { type } = blob
// 创建一个ClipboardItem对象,其中包含一个图像项
const item = new ClipboardItem({
[type]: blob
});
// 使用navigator.clipboard.write方法将ClipboardItem写入剪贴板
try {
await navigator.clipboard.write([item]);
message.success('复制成功~')
} catch (err) {
message.warning('复制失败~')
}
}
navigator.clipboard.write方法有一些限制,它需要https安全上下文。非安全情况下会强制用户主动同意。 因为内部后台项目,兼容性上也还可以。没有过多研究。