ClipboardItem

Интерфейс ClipboardItem из API буфера обмена представляет собой формат одного элемента, используемый при чтении или записи данных буфера обмена с помощью Clipboard.read() и Clipboard.write() соответственно.

Интерфейс ClipboardItem позволяет разработчикам использовать один тип для представления различных форматов данных.

ClipboardItem()

Создаёт новый объект ClipboardItem, с типом MIME в качестве ключа и данными в качестве значения.

types Только чтение

Возвращает массив Array доступных типов MIME в пределах ClipboardItem.

presentationStyle Только чтение

Возвращает одно из следующих значений: "unspecified", "inline" или "attachment".

ClipboardItem.supports()

Проверяет, поддерживается ли заданный тип MIME в буфере обмена. Это позволяет веб-сайту определить, поддерживается ли тип MIME, прежде чем пытаться записать данные.

getType()

Возвращает Promise, который разрешается объектом Blob запрошенного типа MIME или ошибкой, если тип MIME не найден.

В этом примере мы сначала определяем две константы, содержащие ссылки на элемент <p> с текстом и элемент <button>.

Далее, мы определяем функцию copyToClipboard(). Она начинает с сохранения типа MIME "text/plain" в константе, затем создаёт объект clipboardItemData, содержащий одно свойство с ключом, равным типу MIME, и значением текста, который нужно скопировать в буфер обмена (содержимое элемента <p> в данном случае). Поскольку мы работаем с текстом, мы можем передать его напрямую, а не создавать объект Blob.

Мы создаём новый объект ClipboardItem с помощью конструктора ClipboardItem() и передаём его в метод Clipboard.write() для копирования текста в буфер обмена.

Наконец, мы добавляем обработчик событий к элементу <button>, чтобы при нажатии выполнялась функция.

const textSource = document.querySelector("p");
const copyBtn = document.querySelector("button");

async function copyToClipboard() {
  const type = "text/plain";
  const clipboardItemData = {
    [type]: textSource.textContent,
  };
  const clipboardItem = new ClipboardItem(clipboardItemData);
  await navigator.clipboard.write([clipboardItem]);
}

copyBtn.addEventListener("click", copyToClipboard);

Здесь мы используем supports() для проверки поддержки типа MIME данных image/svg+xml. Если поддержка есть, мы загружаем изображение SVG с помощью Fetch API, а затем считываем его в Blob, который мы можем использовать для создания объекта ClipboardItem, записываемого в буфер обмена.

async function writeClipImg() {
  try {
    if (ClipboardItem.supports("image/svg+xml")) {
      const imgURL = "/my-image.svg";
      const data = await fetch(imgURL);
      const blob = await data.blob();
      await navigator.clipboard.write([
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ]);
      console.log("Fetched image copied.");
    } else {
      console.log("SVG images are not supported by the clipboard.");
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Здесь мы возвращаем все элементы в буфере обмена через метод clipboard.read(). Затем используем свойство ClipboardItem.types для задания аргумента getType() и возвращения соответствующего объекта blob.

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();

    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        // we can now use blob here
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

• API буфера обмена
• Статья о поддержке изображений для Async Clipboard