Node와 함께 Puppeteer를 사용하여 PDF를 만드세요!

Puppeteer와 Node.js를 사용하여 PDF 생성기를 만드는 방법

동적 PDF 생성은 웹 개발의 일반적인 요구 사항입니다. 송장, 보고서, 이력서 등 강력한 PDF 생성기를 만드는 것은 개발자에게 필수적인 기술입니다. 이 기사에서는 강력한 헤드리스 브라우저 라이브러리인 Node.js와 Puppeteer를 사용하여 PDF 생성기를 구축하는 과정을 안내하겠습니다.

예를 들어, 저는 이와 동일한 방법을 사용하여 사용자 입력을 받아 동적으로 PDF를 생성하는 CV Maker 프로젝트를 구축했습니다. 여기에서 프로젝트의 라이브 데모를 볼 수 있습니다: 라이브 데모.

이 가이드는 초보자에게 친숙한 언어로 작성되었습니다. 불명확한 부분이 있으시면 댓글 남겨주시면 최대한 빠르게 답변해드리겠습니다.

---

전제 조건

시작하기 전에 다음 사항을 확인하세요.

• Node.js가 컴퓨터에 설치되어 있습니다.
• 기본 Node.js 프로젝트 스켈레톤 설정.
• 프로젝트에 종속성으로 설치된 Puppeteer:

  npm install puppeteer

이 튜토리얼의 전체 소스 코드를 참조하려면 내 GitHub 저장소를 확인하세요.

---

1단계: 데이터 수신을 위한 POST 엔드포인트 생성

먼저 클라이언트가 PDF를 생성하기 위해 데이터를 보낼 수 있는 엔드포인트를 만듭니다. 이를 위해 index.js(또는 이에 상응하는 기본 서버 파일)에 간단한 POST 경로를 정의하겠습니다.

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing the data sent from the client
});

이 엔드포인트는 PDF에 포함되어야 하는 데이터를 수신합니다.

---

2단계: 컨트롤러 파일 생성

코드를 체계적으로 정리하려면 프로젝트 디렉터리에 Controllers라는 폴더를 만드세요. 이 폴더 안에 PdfController.js라는 파일을 만듭니다.

컨트롤러 파일은 PDF 생성 논리를 작성하는 곳입니다. 이렇게 하면 코드가 모듈화되어 유지 관리가 더 쉬워집니다.

---

3단계: PDF 생성을 위한 논리 작성

PdfController.js에서 Puppeteer를 사용하여 PDF를 생성하려면 다음 코드를 추가하세요.

export default (async function (postData) {
    try {
        const browser = await puppeteer.launch({
            headless: true,
            args: ["--no-sandbox", "--disable-gpu"],
        });

        const page = await browser.newPage();
        const content = `<h1 id="postData">${postData}</h1>`;

        await page.setContent(content);
        await page.emulateMediaType('screen');
        await page.pdf({
            path: 'resume.pdf',
            format: 'A4',
            printBackground: true,
        });

        console.log('PDF created');
        await browser.close();
    } catch (err) {
        console.error('Error:', err);
    }
});

이 코드의 기능은 다음과 같습니다.

1. 헤드리스 모드에서 Puppeteer 브라우저 인스턴스를 시작합니다.
2. 새 페이지를 열고 사용자가 제공한 데이터를 사용하여 내용을 설정합니다.
3. 페이지 내용을 PDF로 변환하여 이력서.pdf로 저장합니다.
4. 리소스를 확보하기 위해 브라우저를 닫습니다.

---

4단계: POST 끝점에서 PdfController 함수 사용

이제 PdfController 함수를 index.js의 POST 엔드포인트에 연결하세요.

import PdfController from "./controllers/controller.js";

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing the data sent from the client
    await PdfController(postData);
});

이렇게 하면 /data 엔드포인트가 호출될 때마다 PDF 생성 논리가 실행됩니다.

---

5단계: PDF 생성 확인

이 시점에서 Postman 또는 기타 HTTP 클라이언트를 사용하여 엔드포인트를 테스트할 수 있습니다. 관련 텍스트 데이터와 함께 POST 요청을 보내면 이력서.pdf라는 이름의 PDF가 프로젝트의 루트 디렉터리에 생성됩니다.

---

6단계: PDF를 클라이언트에게 다시 보내기

생성된 PDF를 응답으로 클라이언트에 다시 보내려면 fs-extra 패키지를 설치하세요.

  npm install puppeteer

그런 다음 POST 엔드포인트를 다음과 같이 업데이트하세요.

app.post("/data", async (req: Request, res: Response) => {
    let postData = req.body.data; // Storing the data sent from the client
});

이 코드는 이력서.pdf 파일을 다운로드 가능한 첨부 파일로 클라이언트에 보냅니다.

---

결론

그리고 그게 다입니다! ? Node.js 및 Puppeteer를 사용하여 완전한 PDF 생성기를 구축했습니다. 이 설정은 사용자 입력을 기반으로 PDF를 동적으로 생성하고 다운로드 가능한 파일로 다시 보냅니다.

귀하의 성과는 다음과 같습니다.

• POST 엔드포인트로 Node.js 서버를 설정합니다.
• Puppeteer를 사용하여 PDF를 동적으로 생성했습니다.
• 생성된 PDF를 고객에게 다시 보냈습니다.

---

보너스

잘 구조화되고 서식이 지정된 PDF(예: 표와 스타일이 포함된 이력서 또는 송장)를 생성하려면 댓글로 알려주시기 바랍니다. 고급 사용 사례에 대한 또 다른 튜토리얼을 작성하고 싶습니다.

또한 전체 프로젝트 코드를 자유롭게 확인해 보세요. 문서화가 잘 되어 있고 초보자에게 친숙합니다.

좋은 하루 보내세요!

위 내용은 Node와 함께 Puppeteer를 사용하여 PDF를 만드세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!