【日常记录】【JS】Clipboard API 剪切板API

最新推荐文章于 2024-05-25 13:46:03 发布

嘤嘤怪呆呆狗

最新推荐文章于 2024-05-25 13:46:03 发布

阅读量1k

点赞数 30

分类专栏：日常记录文章标签： javascript 前端开发语言 vue 剪切板

本文链接：https://blog.csdn.net/qq_45634593/article/details/137035550

版权

日常记录专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

1、Clipboard API

Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，其就能提供系统剪贴板的读写访问能力。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。

所有 Clipboard API 的方法都是异步的;它们返回一个 Promise 对象，在剪贴板访问完成后被兑现。如果剪贴板访问被拒绝，promise 也会被拒绝。

在js 上， navigator.clipboard

谷歌浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。不过，开发环境（localhost）允许使用非加密协议。
读取剪切板的时候，会有一个弹框，只有允许了，才可以读取

2、方法

2.1 read

理论上，该方法可以返回任意数据（与 readText（）不同，readText（）只能返回文本）。浏览器通常支持读取文本、HTML 和 PNG 图像数据 — 有关详细信息，请参阅浏览器兼容性。

经过测试，只读读取剪切板的第一条内容

返回值：promise

navigator.clipboard.read()

2.2 readText

这个方法只能读取剪切板的文本内容

返回值：promise

const destination = document.getElementById("outbox");
destinationImage.addEventListener("click", () => {
  navigator.clipboard
    .readText()
    .then((clipText) => {
		// 内容
	});
});

2.3 write

Clipboard 接口的 write（）方法将任意数据（如图像）写入剪贴板，完成后完成返回的 Promise。这可用于实现剪切和复制功能。
该方法理论上可以写入任意数据（与 writeText（）不同，writeText（）只能写入文本）。 浏览器通常支持写入文本、HTML 和 PNG 图像数据 — 有关详细信息，请参阅浏览器兼容性。

实际测试了一下，只有png 支持度最好

// Get canvas can add an event handler for the click event.
const canvas = document.getElementById("canvas");
canvas.addEventListener("click", copyCanvasContentsToClipboard());

async function copyCanvasContentsToClipboard() {
  // Copy canvas to blob
  const blob = await canvas.toBlob();
  // Create ClipboardItem with blob and it's type, and add to an array
  const data = [new ClipboardItem({ [blob.type]: blob })];
  // Write the data to the clipboard
  await navigator.clipboard.write(data);
}

2.4 writeText

剪贴板接口的 writeText（）方法将指定的文本写入系统剪贴板，返回一个 Promise，该 Promise 在系统剪贴板更新后解析。

3、阻止用户复制内容

在这里插入图片描述

右击选择，复制 或者按键盘的 ctrl+c 都能触发这个事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="div1">
    <h3>禁止复制</h3>
    <span>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, nostrum provident qui quis eveniet, voluptatum
      porro
      expedita labore ex quasi numquam eligendi iusto animi deleniti quod obcaecati id cupiditate sint!
    </span>
  </div>
  <hr>
  <script>
    document.addEventListener('copy', function (e) {
      e.preventDefault() // 阻止默认行为，就是阻止用户复制
      console.log('正在复制~~~');
      // alert('禁止复制')
      navigator.clipboard.writeText('禁止复制！！！！')
    })
  </script>
</body>

</html>

在这里插入图片描述

4、在复制的文字后面追加内容

类似于 csdn、掘金，复制别人文章的内容后，后面追加了一些内容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
  <button>复制</button>
  <script>
    let inputEle = document.querySelector('input')
    let btnEle = document.querySelector('button')
    btnEle.onclick = function (e) {
      navigator.clipboard.writeText(inputEle.value + '\n呆呆狗编写，交钱了吗，让你复制了吗')

    }
  </script>
</body>

</html>

5、读取剪切板内容

准备一张图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    navigator.clipboard.read()
      .then(data => {
        data.forEach(clipboardItem => {
          console.log('剪贴板数据：', clipboardItem);
          clipboardItem.types.forEach(type => {
            clipboardItem.getType(type).then(async data => {
              console.log('遍历当前项数据', data);
              if (type == "text/plain") {
                // 文本
                let spanEl = document.createElement('span');
                spanEl.innerText = await data.text();
                document.body.appendChild(spanEl);
              } else if (type == "image/png") {
                let imgEl = document.createElement('img');
                imgEl.src = URL.createObjectURL(data);
                document.body.appendChild(imgEl);
              } else if (type == "text/html") {
                let spanEl = document.createElement('span');
                spanEl.innerHTML = await data.text();
                document.body.appendChild(spanEl);
              }
            });
          });
        });
      })
      .catch(err => {
        console.error('无法读取剪贴板内容：', err);
      });
  </script>
</body>

</html>

6、让图片插入到剪切板

浏览器支持png，其他的不支持

这个是png的图片
在这里插入图片描述
现在的剪切板是空的

执行下面代码后，插入成功了
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>让图片插入倒剪切板</button>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
  <script>
    let btnEl = document.querySelector('button')
    btnEl.addEventListener('click', function () {
      axios({
        // url: '//resource.teld.cc/teldimage/142/fdb66c6e900e420795bfc2e8a07ba071.png',
        url: '//resource.teld.cc/teldimage/142/60602b3255ec4a809beebc75a7743f43.png',
        // url: '//resource.teld.cc/teldimage/142/7481cc7f72d94dd6a1bff1312ca66ca9.gif', // Failed to execute 'write' on 'Clipboard': Type image/gif not supported on write.
        // url: '//resource.teld.cc/teldimage/142/7f3df4a214f94b2099a41ba249048c8e.jpg',// DOMException: Failed to execute 'write' on 'Clipboard': Type image/jpeg not supported on write.
        // url: '//resource.teld.cc/telddoc/142/7bacb70e6d184509a7df1a5a7e76305d.pdf',// PDF 格式不支持写入。DOMException: Failed to execute 'write' on 'Clipboard': Type application/pdf not supported on write.
        responseType: "blob"
      })
        .then(res => {
          console.log(res.data);
          navigator.clipboard.write([new ClipboardItem({
            // 'image/png': res.data
            [res.data.type]: res.data
          })]).then(res => {
            console.log('写入成功', res);
          })
        })
    })
  </script>
</body>

</html>