[javascript] Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 파일로 저장하기

30 Nov 2023

javascript

웹페이지에서 텍스트를 복사하여 파일로 저장하는 기능은 많은 사용자들이 희망하는 기능 중 하나입니다. 이번에는 Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 파일로 저장하는 방법을 알아보겠습니다.

Clipboard.js란?

Clipboard.js는 클립보드 작업을 쉽게 처리할 수 있도록 도와주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹페이지에서 텍스트 복사, 잘라내기, 붙여넣기 등의 작업을 구현할 수 있습니다.

필요한 라이브러리 설치하기

먼저, Clipboard.js를 사용하기 위해 필요한 라이브러리를 설치해야 합니다. npm을 사용한다면 아래의 명령어를 사용하여 설치할 수 있습니다.

npm install clipboard

HTML 마크업 준비하기

다음으로, HTML 파일에 Clipboard.js를 사용하기 위한 마크업을 준비해야 합니다. 아래의 예제 코드를 참고하여 작성해보세요.

<!DOCTYPE html>
<html>
<head>
  <title>복사한 내용 저장하기</title>
  <!-- Clipboard.js CDN 추가하기 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</head>
<body>
  <button id="copyButton" data-clipboard-target="#content">복사하기</button>
  
  <div id="content">
    이 부분은 복사하여 저장할 내용입니다.
  </div>

  <script>
    // Clipboard.js 초기화
    var clipboard = new ClipboardJS('#copyButton');
  
    // 복사 완료 시 이벤트 처리
    clipboard.on('success', function(e) {
      console.log('복사 완료:', e.text);
    });
  
    // 복사 실패 시 이벤트 처리
    clipboard.on('error', function(e) {
      console.error('복사 실패:', e.action);
    });
  </script>
</body>
</html>

위의 예제 코드에서는 #copyButton 버튼을 클릭하면 #content 요소의 내용이 클립보드에 복사되도록 구현되어 있습니다.

클립보드 내용을 파일로 저장하기

웹페이지에서 복사한 내용을 파일로 저장하는 기능을 추가하기 위해, clipboard.on('success', ...) 이벤트 핸들러에서 추가 작업을 수행해야 합니다. 아래의 예제 코드를 참고하여 작성해보세요.

// 복사 완료 시 이벤트 처리
clipboard.on('success', function(e) {
  var text = e.text;
  var blob = new Blob([text], { type: 'text/plain' });
  var anchor = document.createElement('a');

  anchor.download = 'copied_text.txt';
  anchor.href = window.URL.createObjectURL(blob);
  anchor.click();
});

위의 코드에서는 클립보드에 복사한 텍스트를 가져와서 Blob 객체를 생성한 후, 이를 사용하여 파일을 다운로드하고 있습니다. 파일의 이름은 copied_text.txt로 지정되어 있습니다.

정리

이제 Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 파일로 저장하는 기능을 구현하는 방법을 알아보았습니다. 복사한 내용을 파일로 다운로드하는 기능은 사용자에게 더 나은 편의성을 제공할 수 있습니다. Clipboard.js는 다양한 클립보드 작업을 처리할 수 있는 강력한 도구이므로, 다른 활용도를 고려해볼 수도 있습니다.

더 자세한 내용은 Clipboard.js 공식 문서를 참고하세요.