Colin's Blog
[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 다른 포맷으로 저장하기

웹페이지에서 텍스트나 이미지 등을 복사하여 다른 곳에 붙여넣기 할 수 있는 기능은 많은 사용자들에게 편의를 제공합니다. 이러한 복사 기능을 좀 더 활용해서 웹페이지에서 복사한 내용을 다른 포맷으로 저장해야 하는 경우에는 어떻게 해야 할까요?

이런 문제를 해결하기 위해 Clipboard.js 라이브러리를 사용할 수 있습니다. Clipboard.js는 복사 기능을 쉽게 구현할 수 있는 자바스크립트 라이브러리이며, 웹페이지에서 텍스트나 이미지를 복사할 때 이벤트를 감지하여 클립보드에 저장하는 기능을 제공합니다.

Clipboard.js 설치 및 사용 방법

먼저 Clipboard.js를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install clipboard --save

설치가 완료되면, 자바스크립트 파일에 아래와 같은 코드를 추가해 줍니다.

import ClipboardJS from 'clipboard';

const clipboard = new ClipboardJS('.copy-button');

위의 코드에서 .copy-button은 복사 버튼의 클래스명을 나타내며, 해당 클래스를 가진 엘리먼트에 클릭 이벤트를 등록합니다.

복사 버튼을 클릭할 때마다 아래와 같은 코드를 실행하면, 클립보드에 복사한 내용을 원하는 포맷으로 처리할 수 있습니다.

clipboard.on('success', function(event) {
  event.clearSelection();
  alert('복사가 완료되었습니다!');
});

위의 코드는 복사가 성공했을 때 실행될 콜백 함수를 정의합니다. event.clearSelection()은 텍스트를 복사한 뒤 선택 영역을 해제하는 역할을 합니다. 마지막으로, 사용자에게 복사가 완료되었다는 알림을 보여줍니다.

복사한 내용을 다른 포맷으로 저장하기

Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 다른 포맷으로 저장하려면, 복사 버튼 클릭 이벤트 핸들러에서 원하는 형식으로 데이터를 가공하면 됩니다. 예를 들어, 복사한 텍스트를 JSON 형식으로 저장해보겠습니다.

clipboard.on('success', function(event) {
  event.clearSelection();

  // 복사한 텍스트를 JSON 형식으로 가공
  const copiedText = event.text;
  const jsonData = {
    content: copiedText
  };
  const jsonString = JSON.stringify(jsonData);

  // JSON 형식의 텍스트를 파일로 저장
  const dataBlob = new Blob([jsonString], { type: 'application/json' });
  const dataBlobUrl = URL.createObjectURL(dataBlob);
  const link = document.createElement('a');
  link.href = dataBlobUrl;
  link.download = 'copied_text.json';
  link.click();

  alert('복사한 내용이 JSON 파일로 저장되었습니다!');
});

위의 코드에서는 복사한 텍스트를 jsonData 객체에 저장하고 JSON 문자열로 직렬화합니다. 그리고 이를 Blob 객체로 변환한 뒤, URL 객체를 생성하여 다운로드할 링크를 생성합니다. 마지막으로, 사용자에게 복사한 내용이 JSON 파일로 저장되었다는 알림을 보여줍니다.

이와 같은 방식으로 Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 다른 포맷으로 저장할 수 있습니다.

참고 문서

© 2018 Colin. All rights reserved.