Должен знать API JavaScript — API буфера обмена

Добро пожаловать в серию Обязательно знать JavaScript API. Эта серия поможет вам изучить JavaScript API, чтобы вы могли более эффективно использовать его, как старший инженер. Начнем учиться вместе:

🏝 1. Что такое API буфера обмена

Clipboard API — это набор API-интерфейсов JavaScript для управления буфером обмена в браузере. С помощью API буфера обмена разработчики могут копировать текст, изображения и другие данные в буфер обмена, а также считывать данные из буфера обмена для выполнения таких функций, как копирование, вырезание и вставка.

1.2 Пример использования

API буфера обмена можно широко использовать в различных веб-приложениях, таких как

Скопируйте, вырежьте и вставьте в текстовом редакторе.
Скопируйте и вставьте изображения в редактор изображений.
Копируйте и делитесь ссылками на веб-страницах.

🎨 2. Как использовать API буфера обмена

API буфера обмена включает два основных интерфейса: Clipboard и DataTransfer. Интерфейс буфера обмена используется для буферов обмена операционной системы (таких как буфер обмена в Windows или macOS) и содержит следующие методы:

writeText(text: string): Promise<void>: Копирует текст в буфер обмена.
readText(): Promise<string>: Читает текст из буфера обмена.

Ниже приведен пример копирования текста в буфер обмена с помощью интерфейса буфера обмена:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Clipboard API Example</title>
  </head>
  <body>
    <button id="copy-btn">Copy to Clipboard</button>
    <script>
      const copyButton = document.getElementById("copy-btn");
      copyButton.addEventListener("click", async () => {
        try {
          await navigator.clipboard.writeText("Hello, World!");
          console.log("Text copied to clipboard");
        } catch (error) {
          console.error("Failed to copy text: ", error);
        }
      });
    </script>
  </body>
</html>

В этом примере нажатие кнопки «Копировать в буфер обмена» успешно скопирует текст «Hello, World!».

Интерфейс DataTransfer используется для имитации буфера обмена внутри приложения и содержит следующие методы:

setData(type: string, data: string): void: копирует данные указанного типа в буфер обмена.
getData(type: string): string: считывает данные указанного типа из буфера обмена.

Ниже приведен пример копирования текста в буфер обмена с использованием интерфейса DataTransfer:

const dataTransfer = new DataTransfer();

dataTransfer.setData("text/plain", "Hello, World!");
const element = document.createElement("div");

element.addEventListener("copy", (event) => {
  event.clipboardData.setData("text/plain", dataTransfer.getData("text/plain"));
  event.preventDefault();
});

document.body.appendChild(element);
element.dispatchEvent(new ClipboardEvent("copy"));

🧭 3. Примеры API буфера обмена

Ниже приведены некоторые реальные сценарии для API буфера обмена:

3.1 Копирование текста

Текст можно скопировать в буфер обмена с помощью интерфейса Clipboard, пример которого следующий:

navigator.clipboard
  .writeText("Hello, World!")
  .then(() => console.log("Text copied to clipboard"))
  .catch((error) => console.error("Failed to copy text: ", error));

3.2 Копирование изображений

Копировать изображения в буфер обмена можно с помощью интерфейса DataTransfer, пример которого показан ниже:

const dataTransfer = new DataTransfer();
dataTransfer.items.add(
  new File(["hello world"], "hello.txt", { type: "text/plain" })
);
dataTransfer.items.add(
  new File(["world"], "world.txt", { type: "text/plain" })
);

const element = document.createElement("div");
element.addEventListener("copy", (event) => {
  event.clipboardData.setData("text/plain", dataTransfer.getData("text/plain"));
  event.clipboardData.files = dataTransfer.files;
  event.preventDefault();
});
document.body.appendChild(element);
element.dispatchEvent(new ClipboardEvent("copy"));

3.3 Чтение данных из буфера обмена

Текст из буфера обмена можно прочитать с помощью интерфейса Clipboard, пример которого показан ниже:

navigator.clipboard
  .readText()
  .then((text) => console.log("Text read from clipboard: ", text))
  .catch((error) =>
    console.error("Failed to read text from clipboard: ", error)
  );

4. Совместимость API буфера обмена, плюсы и минусы

4.1 Совместимость API буфера обмена

Ниже приведен статус совместимости API буфера обмена:

Хром: 43+ ✅
Край: 12+ ✅
Firefox: 41+ ✅
Internet Explorer: ❌
Опера: 29+ ✅
Сафари: 10+ ✅

Вы можете использовать веб-сайт Могу ли я использовать, чтобы проверить совместимость API буфера обмена.

4.2 Преимущества и недостатки API буфера обмена

К преимуществам API буфера обмена относятся:

Поддержка управления буфером обмена в браузере для облегчения копирования, вырезания и вставки.
Поддержка копирования различных типов данных (текст, изображения и т. д.) в буфер обмена.
Поддержка чтения различных типов данных из буфера обмена.

К недостаткам API буфера обмена относятся:

Проблемы совместимости могут привести к тому, что некоторые пользователи не смогут использовать соответствующие функции.
Необходимость получения авторизации от пользователя для работы с буфером обмена может вызвать ненужные помехи для пользователя.
В некоторых случаях безопасность может быть проблемой, например, вредоносные веб-сайты могут получить доступ к конфиденциальной информации, скопированной пользователем в буфер обмена.

👍 5. Предложения и предостережения по использованию API буфера обмена

При использовании API буфера обмена необходимо учитывать следующее:

При использовании интерфейса буфера обмена необходимо получить авторизацию пользователя. Вы можете запросить авторизацию, когда пользователь выполняет соответствующее действие, или запросить авторизацию при загрузке страницы.
При использовании интерфейса DataTransfer необходимо установить свойство event.clipboardData в событии копирования, иначе операция копирования может завершиться ошибкой.
При обработке данных буфера обмена необходимо обращать внимание на тип данных, чтобы избежать непредвиденных ошибок.

Мы также можем использовать некоторые сторонние библиотеки для быстрой реализации требований:

clipboard.js: 33,1 тыс. ⭐, простая библиотека JavaScript для работы с буфером обмена.
clipboard-polyfill: 884⭐, библиотека полифилла буфера обмена для реализации аналогичных функций в браузерах, не поддерживающих API буфера обмена.
react-copy-to-clipboard: 2.2K ⭐, библиотека буфера обмена на основе React для реализации функций копирования и вставки в приложениях React.

Все перечисленные выше библиотеки предоставляют простые в использовании интерфейсы, которые помогают разработчикам быстро реализовывать функции, связанные с API буфера обмена.

🍭 6. Резюме

API буфера обмена — это набор API-интерфейсов JavaScript для управления буфером обмена в браузере. С помощью API буфера обмена разработчики могут копировать текст, изображения и другие данные в буфер обмена, а также считывать данные из буфера обмена для выполнения функций копирования, вырезания и вставки. На практике API буфера обмена можно широко использовать в различных веб-приложениях, таких как текстовые редакторы, редакторы изображений, веб-страницы и т. д. Однако совместимость API буфера обмена имеет некоторые проблемы, и разработчикам необходимо заниматься совместимостью. Чтобы лучше использовать API буфера обмена, разработчикам необходимо обратить внимание на следующие вещи:

При использовании интерфейса Clipboard необходимо получить авторизацию пользователя.
При использовании интерфейса DataTransfer необходимо установить свойство event.clipboardData в событии copy.
При работе с данными буфера обмена необходимо обращать внимание на тип данных.

🎯 7. Развернуть

Если вам нравится изучать JavaScript, вы можете подписаться на меня в Medium или Twitter, чтобы узнать больше о JavaScript!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .