基于Vue3實現(xiàn)一鍵復制圖片到剪貼板功能

更新時間：2026年04月01日 09:33:58 作者：束塵

日常開發(fā)后臺管理系統(tǒng)時,經(jīng)常會遇到附件或者圖片一鍵復制、直接粘貼到本地或者聊天窗口的需求,本文將基于Vue3?+?Element?Plus?+?Clipboard?API實現(xiàn)點擊按鈕復制服務器圖片到系統(tǒng)剪貼板,有需要的可以了解下

今天分享一個生產(chǎn)環(huán)境可用的實現(xiàn)方案：基于 Vue3 + Element Plus + Clipboard API，實現(xiàn)點擊按鈕復制服務器圖片到系統(tǒng)剪貼板，復制后可直接粘貼到本地文檔、聊天框、畫圖工具等場景，完美解決圖片跨端粘貼痛點。

需求場景

表格中展示文件列表，僅圖片格式支持一鍵復制
點擊復制按鈕，從服務器獲取圖片流
寫入系統(tǒng)剪貼板，支持本地任意位置粘貼
增加加載狀態(tài)、格式校驗、異常提示，提升用戶體驗

完整實現(xiàn)代碼

1. 模板部分（Element Plus 表格按鈕）

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

2. 邏輯實現(xiàn)（核心復制方法）

/**
 * 復制圖片到系統(tǒng)剪貼板（支持本地粘貼）
 * @param fileInfo 圖片文件信息（包含fileId、fileName）
 */
const copyAttachment = async (fileInfo: any) => {
  const { fileId, fileName } = fileInfo

  // 校驗：僅支持圖片格式（可根據(jù)業(yè)務擴展格式）
  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. 寫入系統(tǒng)剪貼板（核心API）
    const clipboardData = [new ClipboardItem({ [blob.type]: blob })]
    await navigator.clipboard.write(clipboardData)

    // 成功提示
    ElMessage.success('圖片已成功復制到剪貼板，可直接粘貼使用')
  } catch (err) {
    console.error('圖片復制失?。?, err)
    // 異常處理：權限問題/網(wǎng)絡問題/接口異常
    ElMessage.error('復制失敗，請確保瀏覽器已授權剪貼板權限或圖片可正常訪問')
  } finally {
    // 無論成功失敗，關閉加載
    loading.close()
  }
}

3. 補充：文件格式校驗輔助方法

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