React 구성 요소에서 PDF 생성

때때로 React 구성 요소에서 PDF 파일을 생성해야 합니다. 이 자습서에서는 React 구성 요소에서 PDF 파일을 만드는 방법을 살펴봅니다.

React 구성 요소에서 PDF 생성

React는 널리 사용되는 프론트엔드 개발 프레임워크입니다. 우리는 때때로 온라인 앱을 디자인하는 동안 PDF 문서를 생성해야 하며 전체 웹 페이지일 수도 있고 구성 요소일 수도 있습니다.

jspdf 및 react-dom/server 라이브러리를 사용하여 React 구성 요소를 사용하여 PDF 파일을 생성할 수 있습니다.

시작하려면 다음 명령을 사용하여 jspdf npm 패키지를 설치합니다.

npm install jspdf --save

기본적으로 react-dom/server에는 Create React App에서 생성된 프로젝트가 포함됩니다.

설치 후 해당 패키지를 적절한 React 구성 요소로 가져와야 합니다.

import JsPDF from 'jspdf';
import ReactDOMServer from 'react-dom/server';

이제 PDF를 생성하고 내보내는 기능을 개발할 것입니다. 전체 예를 살펴보겠습니다.

import jsPDF from 'jspdf';
import React from 'react';
import ReactDOMServer from 'react-dom/server';

const document = new jsPDF();
const Shiv =
    <b>You have Downlaoded a component from react<
        /b>;

export default function App() {
  const save = () => {
    document.html(ReactDOMServer.renderToStaticMarkup(Shiv), {
      callback: () => {
        document.save("yourDoc.pdf");
      },
    });
  };

  return (
    <div>
      <button onClick={save}>React Component to pdf</button><
    /div>
  );
}

새로운 jsPDF 함수 개체 인스턴스를 생성하고 이를 document에 할당했습니다. 그런 다음 굵은 텍스트를 표시하는 Shiv JSX 문이 있습니다.

그 다음 App()에서 renderToStaticMarkup 메소드에 의해 생성된 HTML 문자열을 사용하여 document.html 메소드를 호출하는 save 함수를 작성합니다.

renderToStaticMarkup은 추가 특성을 제거할 때 유용하며 React를 기본 정적 페이지 생성기로 활용하려는 경우 일부 바이트를 절약할 수 있습니다. 마크업을 대화식으로 만들기 위해 클라이언트에서 React를 사용하는 경우 이 방법을 사용하지 마십시오.

대신 서버에서 ReactDOM 및 renderToString을 사용하십시오.

출력:

React 구성 요소를 pdf로 다운로드하는 데 도움이 되는 버튼을 볼 수 있습니다. 클릭하면 yourDoc.이라는 파일이 다운로드됩니다.