분류 Reactjs

노드, React 구성 요소 및 헤드리스 크롬을 사용하여 PDF를 생성하는 방법

컨텐츠 정보

  • 조회 302 (작성일 )

본문

Google Puppeteer노드 서비스를 사용하여 Chrome 인스턴스를 제어 할 수 있는 노드 API입니다. 이 기술을 활용하여 원하는 Javascript 프레임 워크를 사용하여 PDF를 쉽게 생성 할 수 있습니다.


이 게시물에서는 노드 서비스와 함께 React 프로젝트를 사용하여 스타일이 지정된 PDF를 생성하는 방법을 살펴 봅니다.


https://www.pdftron.com/blog/react/react-to-pdf/ 


이 구조는 PDFTron의 웹 투 PDF 작동 방식의 중추입니다. 웹 기술을 사용하여 빠른 PDF 생성기를 찾고 있다면 확인하십시오! 원격 PDF를 URL로 변환, 페이지 매김, 동적 내용 등과 같이 이 기사에서 다루지 않은 많은 기능이 제공됩니다.


React가 필요하지 않습니다! 

web-to-pdf가 작동하는 데 React 구성 요소가 필요하지 않습니다. 모든 프레임 워크, 심지어 바닐라 JS / HTML / CSS도 지원합니다. 


1 단계-프로젝트 준비 


프론트 엔드 개발 환경을 신속하게 설정하기 위해 create-react-app을 사용할 것입니다. 빈 디렉토리로 이동하여 다음을 실행하여 create-react-app를 설치하십시오.


npm i create-react-app 


이제 다음 명령을 사용하여 프로젝트를 생성하겠습니다


npx create-react-app react-to-pdf 


프로젝트가 생성되면 다음을 실행하여 로컬 서버를 시작하십시오.


cd react-to-pdf npm run start 


기본 브라우저가 자동으로 열리고 기본 create-react-app 화면이 표시됩니다!


2 단계-UI 작성 


이제 프로젝트를 정리하고 UI를 설정하겠습니다. 먼저 외부 div를 제외한 src/App.js의 모든 코드를 삭제하여 시작하십시오. logo.svg 가져 오기도 제거 할 수 있습니다. App.js는 이제 다음과 같아야 합니다.


import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { return ( <div className="App"> </div> ); } } export default App; 


템플릿과 함께 사용하지 않는 모든 파일을 삭제할 수도 있습니다. src/App.test.js 및 src/logo.svg를 삭제하십시오.


UI가 PDF 경계 안에 들어가도록 하려면 PDF의 기본 크기와 거의 일치하도록 UI를 설정하십시오. App.js에서 PDF 내용을 담을 새 div를 만들 수 있습니다. App.js는 다음과 같아야 합니다.


import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <div className='pdf'> </div> </div> ); } } export default App; 


이제 PDF 크기에 맞게 .pdf를 설정할 수 있습니다. src/App.css에서 기존 CSS를 모두 삭제하고 다음으로 바꿉니다.


html, body, #root, .App { width: 100%; height: 100%; background-color: #d1d1d1 } /* 612px x 792px is our default size of a PDF */ .pdf { width: 612px; height: 792px; background-color: white; margin: 0 auto; } 


http://localhost:3000/을 확인하면 중간에 흰색 'pdf'가있는 회색 배경이 나타납니다!


이제 PDF에 내용을 넣을 수 있습니다. 이 예에서는 가짜 데이터를 사용하지만 여기서는 원하는 모든 작업을 수행 할 수 있습니다 (예 : 원격 서버에서 데이터 가져 오기).


App.js의 렌더링 함수에서 다음과 같이 가짜 데이터를 추가하십시오.


import React, { Component } from 'react'; import './App.css'; class App extends Component { render() { const data = [ { firstName: "John", lastName: "Smath" }, { firstName: "Paul", lastName: "Smeth" }, { firstName: "Cody", lastName: "Smith" }, { firstName: "Jordan", lastName: "Smoth" }, { firstName: "Jim", lastName: "Smuth" }, ] return ( <div className="App"> <div className='pdf'> </div> </div> ); } } export default App; 


이제 이 데이터를 렌더링 하기 위해 React 컴포넌트를 생성하자. src/components/User/ User.js 파일을 작성하고 컴포넌트를 설정하여 사용자를 렌더링 하십시오. 컴포넌트는 사용자 오브젝트를 소품으로 허용해야 합니다. 이 파일은 다음과 같습니다.


import React from 'react'; export default ({ user }) => { return ( <div className='user' style={{ display: 'flex', justifyContent: 'center'}}> <p>{user.firstName} {user.lastName}</p> </div> ) } 


이제 App.js로 돌아가서 이 컴포넌트를 가져 와서 사용자 목록을 렌더링 하는 데 사용할 수 있습니다.


import React, { Component } from 'react'; import './App.css'; import User from './components/User/User'; class App extends Component { render() { const data = [ { firstName: "John", lastName: "Smath" }, { firstName: "Paul", lastName: "Smeth" }, { firstName: "Cody", lastName: "Smith" }, { firstName: "Jordan", lastName: "Smoth" }, { firstName: "Jim", lastName: "Smuth" }, ] return ( <div className="App"> <div className='pdf'> { data.map(user => <User user={user} key={user.lastName}/>) } </div> </div> ); } } export default App; 


http://localhost:3000/을 체크 아웃 하면 "pdf"로 렌더링 된 간단한 사용자 목록이 표시됩니다.


당신의 UI에 미쳐! 

우리는 UI를 그대로 두고 있지만,이 시점에서 원하는 대로 PDF를 원하는 대로 보이게 할 수 있습니다. 자유롭게 가십시오! 여기에는 제한이 없습니다. 


당신이 보는 것이 당신이 얻는 것임을 주목하는 것이 중요합니다. PDF를 생성하면 PDF는 http://localhost:3000/에 표시된 내용과 똑같이 보입니다. 이미지, 캔버스, 타사 라이브러리를 원하는 대로 사용할 수 있습니다!


3 단계-노드 서비스 작성 


우리의 노드 서비스에는 몇 가지 추가 종속성 (PuppeteerBabel-node)이 필요합니다. 다음 명령으로 설치하십시오.


npm i puppeteer @babel/core @babel/node --save-dev 


이제 우리의 서비스를 만들어 보자. 프로젝트의 루트에서 scripts/generate-pdf.js 파일을 만듭니다. 서비스가 상주 할 파일입니다.


서비스 코드는 실제로 매우 간단합니다. Puppeteer의 새 인스턴스를 작성하여 로컬 서버로 탐색 할 수 있습니다.


노트 

1 부와 2 부에서 설정한 로컬 서버가 실행 중이어야 합니다! 이것은 http://localhost:3000 /이 React 프로젝트를 제공해야 함을 의미합니다. 


generate-pdf.js는 다음과 같아야합니다.


const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('http://localhost:3000/', {waitUntil: 'networkidle2'}); })() 


이 코드는 기본적으로 메모리 내 Chrome 인스턴스를 생성하고 새 탭을 생성 한 다음 탭을 http://localhost:3000/로 이동합니다. async/await 구문에 익숙하지 않은 경우 여기에서 학습하는 것이 좋습니다.


이제 PDF를 생성 할 준비가 되었습니다! 운 좋게도 Puppeteer는 이를 위한 놀라운 API를 제공합니다.


Chrome에서 PDF를 생성 할 때 화면을 에뮬레이션 하도록 지시하는 코드와 PDF를 생성하기 위해 page.pdf()를 호출하는 코드를 추가 할 것입니다. PDF를 원하는 방식으로 보이도록 몇 가지 옵션을 전달합니다.


다음과 같이 generate-pdf.js를 업데이트하십시오.


const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('http://localhost:3000/'); await page.emulateMedia('screen'); await page.pdf({ path: './react.pdf', // path (relative to CWD) to save the PDF to. printBackground: true,// print background colors width: '612px', // match the css width and height we set for our PDF height: '792px', }); await browser.close(); })() 


추가 옵션은 여기에서 찾을 수 있습니다.


그리고 그게 다야! 서비스가 완료되었으며 PDF를 생성 할 준비가 되었습니다.


4 단계-서비스 실행 


마지막 단계는 실제로 스크립트를 실행하는 것입니다. 프로젝트의 루트에는 package.json 파일이 있어야 합니다. 여기에서 파일을 실행할 스크립트를 작성할 수 있습니다. package.json의 scripts 섹션에 다음 행을 추가하십시오.


"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", + "generate": "npx babel-node scripts/generate-pdf.js" }, 



이 스크립트는 babel-node를 사용하여 JS를 변환 한 다음 Node를 사용하여 변환 된 소스 코드를 실행합니다.


이제 프로젝트 루트에서 http://localhost:3000이 여전히 실행 중인지 확인한 후 다음 명령을 실행하십시오.


npm run generate 


reactpdf.png 


결론 


Google의 Puppeteer 프로젝트는 PDF 공간에서 많은 기회를 창출했습니다. 이제 HTML, Javascript 및 CSS를 사용하여 PDF를 쉽게 생성 할 수 있습니다. HTML, Javascript 및 CSS는 모두 처음 UI에 맞춰져 있습니다!


웹 사이트에서 생성 된 PDF를 보고 주석을 달려면 PDFTron의 웹 SDK 인 Webviewer 평가판을 다운로드하여 브라우저에서 PDF를 바로 열고 편집하고 주석을 달 수 있습니다.