基于Vue3实现一键复制图片到剪贴板功能

 <el-button :disabled="!canCopyFile(scope.row.fileName)" link type="primary" @click="copyAttachment(scope.row)">
                                复制
                            </el-button>

/**
 * 复制图片到系统剪贴板（支持本地粘贴）
 * @param fileInfo 图片文件信息（包含fileId、fileName）
 */
const copyAttachment = async (fileInfo: any) => {
  const { fileId, fileName } = fileInfo

  // 校验：仅支持图片格式（可根据业务扩展格式）
  const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(fileName)
  if (!isImage) {
    ElMessage.warning('目前仅支持复制图片格式文件')
    return
  }

  // 加载提示：提升用户体验
  const loading = ElLoading.service({ 
    text: '正在读取图片...', 
    background: 'rgba(0, 0, 0, 0.7)' 
  })

  try {
    // 1. 调用接口获取服务器图片流（替换为你的文件下载接口）
    const res = await downloadMinioFile(fileId)

    // 2. 转换为标准Blob格式
    // 重点：Clipboard API 对 image/png 兼容性最好，强制转换避免兼容性问题
    const blob = new Blob([res.data], { type: 'image/png' })

    // 3. 写入系统剪贴板（核心API）
    const clipboardData = [new ClipboardItem({ [blob.type]: blob })]
    await navigator.clipboard.write(clipboardData)

    // 成功提示
    ElMessage.success('图片已成功复制到剪贴板，可直接粘贴使用')
  } catch (err) {
    console.error('图片复制失败：', err)
    // 异常处理：权限问题/网络问题/接口异常
    ElMessage.error('复制失败，请确保浏览器已授权剪贴板权限或图片可正常访问')
  } finally {
    // 无论成功失败，关闭加载
    loading.close()
  }
}

/**
 * 判断文件是否为可复制的图片格式
 * @param fileName 文件名
 * @returns boolean
 */
const canCopyFile = (fileName: string) => {
  return /\.(jpg|jpeg|png|gif|webp)$/i.test(fileName)
}