절단 없이 여러 페이지로 dom에서 PDF 생성

지난 기사에서 우리는 dom 요소에서 pdf를 생성할 수 있는 방법에 대해 배웠지만 그 방법이 하나의 큰 페이지만 추가하고 언젠가 div가 반으로 잘리는 것과 같은 일부 병목 현상이 있었습니다. 즉, div의 일부가 다음 페이지에 표시되었습니다. 이 기사에서는 자르지 않고 여러 페이지로 dom에서 pdf를 생성하는 방법을 배웁니다.

돔에서 PDF로

오늘 기사에서는 패키지 이름dom-to-pdf을 사용할 것입니다. 이 패키지는 기본적으로 html 요소를 캔버스와 svg로 변환합니다. 그런 다음 캔버스를 PDF로 변환합니다.

이 패키지는 이전 기사에 비해 더 간단하고 사용하기 쉽습니다. 지난 기사에서 우리는 두 개의 서로 다른 패키지를 사용했습니다. 한 패키지는 dom을 이미지로 변환하고 다른 패키지는 이미지를 dom으로 변환했습니다. 그러나 dom-to-pdf를 사용하면 단일 패키지로 두 가지 작업을 모두 수행할 수 있습니다.

이 패키지의 장점은 여러 페이지 형식을 자동으로 관리하는 동시에 PDF에 추가하는 동안 내용이 잘리지 않도록 관리한다는 것입니다. 즉, 대부분의 경우에 매우 유용한 다음 페이지에 전체 div를 추가하는 대신 pdf에 추가하는 동안 div가 부분적으로 잘리지 않을 것입니다.

설치 및 사용

이 패키지는 npm에서 간단하게 설치할 수 있습니다.

npm install --save dom-to-pdf

설치 후 이 패키지를 한 번 가져옵니다.

import domToPdf from 'dom-to-pdf';

domToPdf는 세 가지 인수를 받습니다.

첫 번째 인수는 dom 요소입니다.

두 번째 인수는 옵션 객체가 됩니다.

세 번째는 콜백 함수입니다.

    const element = document.querySelector('.summary-report-container');

  const options = {
      filename: "test.pdf",
    };

domToPdf(element, options, () => {
// callback function
    });

전체 PDF 생성 기능은 다음과 같습니다.

  generatePdf = () => {

    const element = document.querySelector('.summary-report-container');

    const options = {
      filename: "test.pdf",
    };

    return domToPdf(element, options, () => {
      // callback function
    });
  }

생성 후 PDF를 자동으로 저장합니다. 이렇게 하면 내용을 자르지 않고 여러 페이지로 PDF를 생성할 수 있습니다.

How to create range slider with bubble in React