js复制内容至剪切板

139 阅读1分钟
  1. 剪贴板 Clipboard API 为 Navigator 接口添加了只读属性 clipboard,该属性返回一个可以读写剪切板内容的 Clipboard 对象。在 Web 应用中,剪切板 API 可用于实现剪切、复制、粘贴的功能。
  2. 剪贴板 Clipboard API 提供了响应剪贴板命令(剪切、复制和粘贴)与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后,才能访问剪贴板内容;如果用户没有授予权限,则不允许读取或更改剪贴板内容。
  3. 该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式。
/*
 * @Description:复制到剪切板
 * @Author: XuLijuan
 */
const copyTextToClip = (content) => {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    return navigator.clipboard.writeText(content);
  }
  const inputCopy = document.createElement('input'); // 创建一个input标签
  document.body.appendChild(inputCopy); // 把标签添加给body
  inputCopy.style.height = 0;
  inputCopy.style.opacity = 0; // 设置input标签设置为透明(不可见)
  inputCopy.value = content;
  inputCopy.select();
  return new Promise((resolve, reject) => {
    document.execCommand('Copy') ? resolve() : reject();
    document.body.removeChild(inputCopy); // 删除添加的input节点
  });
};
// 使用
copyTextToClip('xxx').then(() => {});