网页端获取用户剪贴板内容

需求：页面有一个"粘贴"按钮，点击后获取用户剪贴板内容并填充到指定输入框中

点击按钮触发"粘贴"事件

html 复制代码

<el-button type="primary" size="small" @click="paste">粘贴</el-button>

paste方法体如下：

javascript 复制代码

// 粘贴
async paste() {
  try {
    await navigator.clipboard.readText();
    console.log("授权成功，允许读取剪贴板");
    getClipBoardData()
      .then((res) => {
        console.log("粘贴", res);
        if (res && res.msg === "success") {
          this.inputValue= res.data;
          return;
        }
        this.$message.error("粘贴失败：" + res.msg);
      })
      .catch((e) => {
        console.log("粘贴失败", e);
        this.$message.error("粘贴失败：" + e);
      });
  } catch (error) {
    console.log("没有权限", error);
    this.$message.error("没有剪贴板读取权限，请手动粘贴到输入框");
  }
}

注：

使用 await navigator.clipboard.readText() 方法判断是否有剪贴板读取权限，如果没有网页会自动弹出询问授权的弹窗；
getClipBoardData 方法见下方：

剪贴板内容获取及处理

将剪贴板内容的获取以及数据格式处理单独封装到了 clipboard.js 文件中，示例方法体如下：

javascript 复制代码

/**
 * 获取剪切板内容，请在调用此方法前确认已获得剪贴板授权
 */
export function getClipBoardData() {
  return new Promise((resolve, reject) => {
    // 检查浏览器支持
    if (!navigator.clipboard || !navigator.permissions) {
      reject("当前浏览器不支持剪贴板读取API");
      return;
    }
    // 请求用户授权
    navigator.permissions
      .query({
        name: "clipboard-read",
      })
      .then((permission) => {
        if (permission.state === "granted") {
          // 用户已授权，读取剪贴板文本
          navigator.clipboard
            .read()
            .then((items) => {
              const data = {
                type: "", // 文件类型：text or image
                data: null,
                msg: "",
              };
              // 查找文本类型项
              const textItem = items.find((item) =>
                item.types.includes("text/plain")
              );
              if (textItem) {
                // 正常的文本内容
                data.type = "text";
                textItem
                  .getType("text/plain")
                  .then((blob) => {
                    const reader = new FileReader();
                    reader.onload = (event) => {
                      const text = event.target.result;
                      console.log("剪贴板文本内容:", text);
                      data.data = text;
                      data.msg = "success";
                      resolve(data);
                      // 处理文本内容（如显示在页面）
                      // document.getElementById("clipboardContent").innerText = text;
                    };
                    reader.readAsText(blob);
                  })
                  .catch((err) => {
                    console.error("读取文本失败:", err);
                    data.msg = "读取文本失败";
                    resolve(data);
                  });
                return;
              }
              // 剪切板内容不符
              data.type = "";
              data.data = null;
              data.msg = "剪切板内容不符";
              resolve(data);
            })
            .catch((err) => {
              console.error("读取剪贴板失败:", err);
              reject("读取剪贴板失败");
            });
        } else {
          console.error("剪贴板读取权限被拒绝", permission.state);
          // 注：浏览器要求剪贴板操作必须在 HTTPS 环境中执行
          reject("剪贴板读取权限被拒绝");
        }
      })
      .catch((err) => {
        console.error("权限查询失败:", err);
        reject("权限查询失败");
      });
  });
}

注：getClipBoardData 方法中由于业务需求目前只做了文本格式数据的判断及处理，还可以通过文件类型判断是否为图片以及 应用数据，具体可结合个人业务做调整；

补充

写入内容到剪贴板：

javascript 复制代码

await navigator.clipboard.writeText("写入的内容")

监听网页的"粘贴"事件，示例：

javascript 复制代码

// 监听整个网页文档的 paste 粘贴事件
document.addEventListener('paste', (event) => {
  const clipboardData = event.clipboardData || window.clipboardData;
  if (clipboardData) {
    const items = clipboardData.items;
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      console.log(`类型: ${item.type}`);
      if (item.type.indexOf('text') !== -1) {
        item.getAsString((text) => {
          console.log('文本内容:', text);
        });
      }
    }
  }
})

注：

‌HTTPS环境要求‌：剪贴板API只能在安全上下文（HTTPS）中使用，本地localhost除外
‌用户手势触发‌：所有剪贴板操作必须由用户主动触发（点击、按键等事件）
‌权限机制‌：读取剪贴板需要明确授权，写入剪贴板通常也需要用户交互上下文