JavaScript로 페이지 콘텐츠를 복사하는 세 가지 방법(요약 공유)

복사 기능을 구현할 수 있는 타사 플러그인이 많이 있는데, 직접 해보면 어떻게 구현하는지 아시나요?

이 문서에서는 세 가지 구현 옵션을 소개합니다.

방법 1:

Async Clipboard API를 이용한

이 방법은 가장 사용하기 쉽지만 호환성이 좋지 않고 요구사항이 많습니다.

샘플 코드:

const promise = navigator.clipboard.writeText(newClipText);

메서드의 반환 값은 Promise입니다. 그리고 이 방법을 사용할 때 페이지에 초점이 맞춰져 있어야 합니다. 그렇지 않으면 오류가 보고됩니다.

방법 2: Document.execCommand API는

Document.execCommand를 사용합니다.

비록 이 방법은 폐기되어 더 이상 웹 표준이 아니지만 많은 역사적 요소를 가지고 있으며 브라우저가 오랫동안 이를 지원할 것이라고 믿습니다.

DOM 요소 콘텐츠 복사

<p id="content">123456</p>
<button id="copyButton">복사</button>

DOM 요소를 복사할 때 Selection API와 Range API를 추가로 사용해야 합니다.

developer.mozilla.org/en-US/docs/…developer.mozilla.org/en-US/docs/…

샘플 코드:

const copyButton = document.getElementById('copyButton')

;

const content = document.getElementById('content');
copyButton.addEventListener('클릭', function () {
  const 선택 = window.getSelection();
  const 범위 = document.createRange();
  //선택한 콘텐츠 범위를 설정합니다.selectNodeContents(content);
  // 선택 항목 지우기 Selection.removeAllRanges();
  //선택한 콘텐츠 추가 Selection.addRange(range);
  document.execCommand('복사');
});

선택 항목을 먼저 지운 다음 범위를 추가해야 합니다.

여기에 세부적인 문제가 있습니다. 복사 버튼을 클릭하면 복사된 내용이 선택되는데, 이는 다소 갑작스럽습니다.

해결 방법은 복사가 완료된 후 selection.removeAllRanges() 호출하여 선택 항목을 지우는 것입니다.

사용자가 페이지를 복사하기 전에 페이지의 일부를 선택하는 또 다른 상황을 생각해 보세요. 복사가 완료된 후에는 선택한 복사 내용을 지우는 것 외에도 사용자가 복사하기 전에 선택한 내용을 복원해야 합니다.

구현 코드는 다음과 같습니다.

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('클릭', function () {
  const 선택 = window.getSelection();
  const 범위 = document.createRange();
  //사용자가 선택한 콘텐츠를 캐시합니다. const currentRange =
    Selection.rangeCount === 0 ? null : Selection.getRangeAt(0);
  //문서 조각 범위 설정.selectNodeContents(content);
  // 선택 항목 지우기 Selection.removeAllRanges();
  //문서 조각을 선택한 콘텐츠로 설정합니다. Selection.addRange(range);
  노력하다 {
    // 클립보드에 복사 document.execCommand('copy');
  } 잡기 (오류) {
    // 복사가 실패했다는 메시지 표시} finally {
    Selection.removeAllRanges();
    if (현재 범위) {
      //사용자가 선택한 콘텐츠 복원 Selection.addRange(currentRange);
    }
  }
});

먼저 사용자가 선택한 콘텐츠를 캐시한 다음 복사가 완료된 후 복원합니다.

입력 요소의 내용을 복사

하고 입력 요소 객체의 select 메서드를 사용하여 내용을 선택합니다. 선택한 내용을 설정하기 위해 범위 프래그먼트를 생성할 필요가 없습니다.

예제 코드:

const copyButton = document.getElementById('copyButton');
const inputEl = document.getElementById('input');
copyButton.addEventListener('클릭', function () {
  const 선택 = window.getSelection();
  const currentRange =
    Selection.rangeCount === 0 ? null : Selection.getRangeAt(0);
  //입력 내용 선택 inputEl.select();
  //클립보드에 복사 try {
    document.execCommand('복사');
  } 잡기 (오류) {
    // 복사가 실패했음을 알리는 메시지 // . . .
  } 마지막으로 {
    Selection.removeAllRanges();
    if (현재 범위) {
      //사용자가 선택한 콘텐츠 복원 Selection.addRange(currentRange);
    }
  }
});

복사 버튼을 클릭해도 이전에 선택한 콘텐츠는 제거되지 않습니다.

방법 3: 복사 이벤트 덮어쓰기

w3c.github.io/clipboard-a…

위 링크의 코드 일부를 예를 들어 인용해 보세요.

// 클립보드에 복사되는 내용을 덮어씁니다.
document.addEventListener('복사', 함수 (e) {
  // e.clipboardData는 처음에는 비어 있지만
  // 클립보드에 복사하려는 데이터입니다.
  e.clipboardData.setData('text/plain', '웨스턴 스크램블 에그');
  // 이는 현재 문서 선택이 중단되는 것을 방지하는 데 필요합니다.
  // 클립보드에 기록 중입니다.
  e.preventDefault();
});

페이지의 내용을 복사하여 붙여넣으면 "서양 스크램블 에그"가 출력됩니다.