자바스크립트 클립보드 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

앞에서 말했듯이 Clipboard 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을 확인하십시오!

오늘 글은 여기까지입니다. 제 글에 문제점이나 문제점이 있다면 댓글로 알려주세요!

모두 좋은 하루 되세요!