快捷導(dǎo)航

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

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

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

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

需求場(chǎng)景

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

完整實(shí)現(xiàn)代碼

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

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

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

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

  // 校驗(yàn)：僅支持圖片格式（可根據(jù)業(yè)務(wù)擴(kuò)展格式）
  const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(fileName)
  if (!isImage) {
    ElMessage.warning('目前僅支持復(fù)制圖片格式文件')
    return
  }

  // 加載提示：提升用戶體驗(yàn)
  const loading = ElLoading.service({ 
    text: '正在讀取圖片...', 
    background: 'rgba(0, 0, 0, 0.7)' 
  })

  try {
    // 1. 調(diào)用接口獲取服務(wù)器圖片流（替換為你的文件下載接口）
    const res = await downloadMinioFile(fileId)

    // 2. 轉(zhuǎn)換為標(biāo)準(zhǔn)Blob格式
    // 重點(diǎn)：Clipboard API 對(duì) image/png 兼容性最好，強(qiáng)制轉(zhuǎn)換避免兼容性問(wèn)題
    const blob = new Blob([res.data], { type: 'image/png' })

    // 3. 寫(xiě)入系統(tǒng)剪貼板（核心API）
    const clipboardData = [new ClipboardItem({ [blob.type]: blob })]
    await navigator.clipboard.write(clipboardData)

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

3. 補(bǔ)充：文件格式校驗(yàn)輔助方法

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