Clipboard.js는 웹페이지에서 텍스트를 복사하여 클립보드에 저장하는 기능을 제공하는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 웹페이지에서 복사한 내용을 다른 파일로 저장할 수 있습니다. 이번 포스트에서는 Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 파일로 다운로드하는 방법에 대해 알아보겠습니다.

Clipboard.js 설치

먼저, Clipboard.js를 설치해야 합니다. npm을 사용하는 경우 아래 명령을 실행하여 Clipboard.js를 설치할 수 있습니다.

npm install clipboard --save

또는 CDN을 사용할 수도 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

복사한 내용 파일로 저장하기

다음은 Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 파일로 저장하는 예제 코드입니다.

var clipboard = new ClipboardJS('.copy-btn');

clipboard.on('success', function(e) {
    var copiedText = e.text;

    var a = document.createElement('a');
    var blob = new Blob([copiedText], { type: 'text/plain' });
    a.href = URL.createObjectURL(blob);
    a.download = 'copied-text.txt';
    a.click();

    URL.revokeObjectURL(a.href);
});

clipboard.on('error', function(e) {
    console.error('Error copying text: ', e);
});

위 코드에서는 .copy-btn 클래스를 가진 버튼을 클릭하면 해당 버튼 옆에 있는 텍스트를 복사합니다. success 이벤트 핸들러에서는 복사한 텍스트를 Blob 객체로 변환하고, 생성된 URL을 통해 다운로드 링크를 생성합니다. download 속성을 사용하여 파일 이름을 지정할 수 있습니다.

결론

Clipboard.js를 사용하여 웹페이지에서 복사한 내용을 파일로 다운로드하는 방법에 대해 알아보았습니다. 이를 통해 사용자는 웹페이지에서 복사한 내용을 파일로 저장할 수 있어 편리하게 활용할 수 있습니다.

참고 자료

• Clipboard.js GitHub 저장소
• Clipboard.js 공식 문서