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 |
---|
댓글