반응에서 JSX를 다운로드 가능한 PDF로 변환

Html2pdf.js 라이브러리의 도움으로 JSX를 PDF로 변환하는 간단한 데모입니다.

React 프로젝트 생성 및 패키지 설치

npx create-react-app jsx-to-pdf-example
cd jsx-to-pdf-example
npm install html2pdf.js 

App.js

import html2pdf from 'html2pdf.js/dist/html2pdf.min';
import './App.css';

function App() {
  const pdfJSX = () => {
    return (
      <>
        <h1>JSX to PDF Convert Example</h1>
        <h2>Hello React</h2> 
      </>
    )
  }

  const printHandler = () => {
    const printElement = pdfJSX();
    console.log(printElement);

    html2pdf().from(printElement).save();
  }

  return (
    <div className="App">
      <button onClick={printHandler}>Print</button>
    </div>
  );
}

export default App;

여기에서 print 버튼을 클릭하면 아무 일도 일어나지 않는다는 것을 알 수 있습니다. 다음은 브라우저의 개발 도구에 표시되는 콘솔 로그입니다.



그래서 기본적으로 html2pdf.js 패키지는 간단한 HTML을 예상하고 아무 일도 일어나지 않습니다.

먼저 ReactDOMServer를 사용하여 JSX를 HTML로 변환한 다음 html2pdf 함수에 전달합니다.
App.js

import ReactDOMServer from 'react-dom/server';
import html2pdf from 'html2pdf.js/dist/html2pdf.min';
import './App.css';

function App() {
  const pdfJSX = () => {
    return (
      <>
        <h1>JSX to PDF Convert Example</h1>
        <h2>Hello React</h2> 
      </>
    )
  }

  const printHandler = () => {
    const printElement = ReactDOMServer.renderToString(pdfJSX());
    // const printElement = pdfJSX();

    html2pdf().from(printElement).save();
  }

  return (
    <div className="App">
      <button onClick={printHandler}>Print</button>
    </div>
  );
}

export default App;

최종 데모


보너스(경고 수정)
패키지와 관련하여 터미널에 몇 가지 경고가 표시되고 이를 수정하는 경우 이 솔루션만 찾았습니다.

루트 디렉토리 내부(/src 외부)에 파일 생성.env.development

다음 줄을 파일에 추가합니다.GENERATE_SOURCEMAP=false 및 경고가 사라집니다.

라이브러리 참조:
https://www.npmjs.com/package/html2pdf.js/v/0.9.0
평화 ✌️