본문 바로가기
Front-End

Web API : Clipboard API

by sharekim 2022. 9. 22.

React에서 객체 복사 기능을 Duplicate로 구현을 했는데

Ctrl + C, Ctrl + V 기능을 구현해달라는 요청이 있어 Web API인 Clipboard API를 접하게 되었다.

 

마침 MDN 에 클립보드에 대해 설명한 게 있길래 가져와본다

더보기

The clipboard is a data buffer that is used for short-term, data storage and/or data transfers, that can be accessed from most or all programs within the environment.

 

1. 클립보드 접근방법

navigator.clipboard.readText().then(
  (clipText) => document.querySelector(".editor").innerText += clipText);

전역객체인 navigator에서 clipboard API로 바로 호출할 수 있다. 

 

 

2. API 종류

Blob으로 데이터를 처리하고 싶은 경우

1. writeText()

- 텍스트로 클립보드에 저장한다.

- param : 클립보드에 저장하고자 하는 string.

- return : Promise. resolve 시 clipboard에 업데이트 된 data를 return. 쓰기 실패 시 reject

navigator.clipboard.writeText("<empty clipboard>").then(() => {
  /* clipboard successfully set */
}, () => {
  /* clipboard write failed */
});

 

2. readText()

- 텍스트로 클립보드에서 불러온다

- return : Promise. resolve 시 text로 된 String을 return 한다. reject는 없는 것 같고, string data가 없으면 ""(공백)을 return.

navigator.clipboard.readText().then(
  (clipText) => document.getElementById("outbox").innerText = clipText);

 

Text로 데이터를 처리하고 싶은 경우

1. wrtie()

- Blob으로 클립보드에 저장한다.

- param : ClipboardItem 객체의 Array.
- return : Promise 객체. resolve 시 클립보드에 쓰인 데이터 return. 쓰기 실패 시 reject.

function setClipboard(text) {
    const type = "text/plain";
    const blob = new Blob([text], { type });
    const data = [new ClipboardItem({ [type]: blob })];

    navigator.clipboard.write(data).then(
        () => {
        /* success */
        },
        () => {
        /* failure */
        }
    );
}


2. read()

- Blob으로 클립보드에서 불러온다. writeText API로 쓰인 Clipboard 객체도 불러오기 가능.
- return : Promise 객체. resolve 시,  ClipboardItem Object의 Array return. 클립보드 권한이 없는 경우 reject.

const destinationImage = document.querySelector('#destination')
destinationImage.addEventListener('click', pasteImage);

async function pasteImage() {
  try {
    const permission = await navigator.permissions.query({ name: 'clipboard-read' });
    if (permission.state === 'denied') {
      throw new Error('Not allowed to read clipboard.');
    }
    const clipboardContents = await navigator.clipboard.read();
    for (const item of clipboardContents) {
      if (!item.types.includes('image/png')) {
        throw new Error('Clipboard contains non-image data.');
      }
      const blob = await item.getType('image/png');
      destinationImage.src = URL.createObjectURL(blob);
    }
  }
  catch (error) {
    console.error(error.message);
  }
}

 

그 외에 클립보드 Event도 있는데 아래 MDN에서 참고하길 바란다.

 

출처 : https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

'Front-End' 카테고리의 다른 글

JSON.stringify()에서 변환되지 않는 것들  (0) 2022.09.22

댓글