JavaScript 클립보드 API

여러분, 안녕하세요! 오늘의 기사에서는 JavaScript의 Clipboard API에 대해 이야기하겠습니다.

그렇다면 이 클립보드 API는 무엇을 할까요?

이름에서 알 수 있듯이 잘라내기, 복사, 붙여넣기와 같은 클립보드 명령에 응답합니다!

예시를 보여드리고 설명드리겠습니다!

아래 예를 확인하십시오.

navigator.clipboard.writeText("Hello").then(res => {
  alert("Copied to clipboard!");
}, rej => {
  alert("Could not copy to clipboard");
});

navigator.clipboard.readText().then(text => {
  console.log(text);
})

아래 코드는 문자열 "Hello"를 클립보드에 복사한 다음 클립보드의 텍스트를 콘솔에 기록합니다. 이 API를 사용하여 클립보드에서 쓰고 읽을 수 있으며 전체 "클립보드에 복사되었습니다!"매우 쉬운 버튼.

분명히 그것은 우리가 할 수 있는 유일한 일이 아닙니다. 클립보드를 사용하여 많은 작업을 수행할 수 있으며 이미지를 복사할 수도 있습니다.

그러나 일부 브라우저에서는 해당 기능이 그다지 훌륭하지 않으므로 항상 호환성 테이블을 확인하는 것이 좋습니다. Clipboard API Browser Compatibility

이전에 말했듯이 클립보드 API를 사용하여 문자열 이외의 데이터를 가져올 수 있으며 이는 아래 예와 같이 수행됩니다.

const copyImageToClipboard = async () => {
  const response = await fetch("path/to/the/image");
  const blob = await response.blob();
  await navigator.clipboard.write([
    new ClipboardItem({"image/png": blob})
  ]);
};

위의 예에서 이미지가 있는 경로에서 이미지를 가져온 다음 blob으로 만들고 클립보드에 새 ClipboardItem 인스턴스로 썼습니다.

그리고 분명히 아래 코드를 작성하여 해당 항목을 읽을 수 있습니다.

const readClipboard = async () => {
  const items = await navigator.clipboard.read();

  return items;
}

하지만 내가 말했듯이 이 API에 대한 브라우저 지원은 여전히 ​​문제가 될 수 있습니다. 따라서 항상 브라우저 호환성 문제에 대해 MDN을 확인하십시오!

오늘의 기사는 여기까지입니다. 내 게시물에 문제가 있으면 의견에 알려주는 것을 잊지 마십시오!

모두 좋은 하루 되세요!