剪贴板 API

🔍 概述

Clipboard API 提供了读取和写入系统剪贴板内容的能力，支持文本、图片等多种数据格式。

📝 基础操作

• 文本
  • navigator.clipboard.readText()

    const text = await navigator.clipboard.readText()
    

  • navigator.clipboard.writeText(text)

    await navigator.clipboard.writeText(text)
    

• 任意内容
  • navigator.clipboard.read()

    async function readClipboard() {
      try {
        const clipboardItems = await navigator.clipboard.read()
        for (const clipboardItem of clipboardItems) {
          for (const type of clipboardItem.types) {
            const blob = await clipboardItem.getType(type)
            const fr = new FileReader()
            fr.onload = (e) => {
              console.log(e.target.result)
            }
            fr.readAsText(blob)
          }
        }
      }
      catch (err) {
        console.error('读取失败:', err)
      }
    }
    

    • navigator.clipboard.write([items])

    async function writeClipboardImage(imageBlob) {
      try {
        const item = new ClipboardItem({
          'image/png': imageBlob
        })
        await navigator.clipboard.write([item])
        console.log('图片写入成功')
      }
      catch (err) {
        console.error('写入失败:', err)
      }
    }