절단 없이 여러 페이지로 dom에서 PDF 생성
2368 단어 react
지난 기사에서 우리는 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는 세 가지 인수를 받습니다.
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
Reference
이 문제에 관하여(절단 없이 여러 페이지로 dom에서 PDF 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/narendersaini32/generate-pdf-from-dom-with-multiple-pages-and-without-cutting-lc1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)