【React/PDF편집】fetch, pdf-lib, downloadjs (feat. 한글폰트)

1. Descritpion

React에서 PDF 템플릿을 편집하고 다운로드하는 과정입니다.

---

2. Prerequisite

다음과 같은 Library가 임포트되어야 합니다.

import React from 'react';
import { PDFDocument, rgb } from 'pdf-lib';
import fontkit from '@pdf-lib/fontkit';
import download from "downloadjs";

---

3. Example

다음과 같은 과정으로 PDF파일에 텍스트를 입력한 후 다운로드 합니다.

---

// PDF와 한글 폰트파일을 서버에서 읽어옵니다.
fetch(templateUrl).then(response => {
    response.blob().then(blob => {
        const templateContent = blob.arrayBuffer();

        fetch(fontUrl).then(response => {
            response.blob().then(blob => {
                const fontContent = blob.arrayBuffer();
                generateAndDownload(templateContent, fontContent);
            });
        });
    });
});

// PDF의 1페이지를 읽어들여서 정해진 좌표에 한글 텍스트를 입력한 후 다운로드됩니다.
const generateAndDownload = async (
    templateContent: Promise<ArrayBuffer>, fontContent: Promise<ArrayBuffer>
) => {
    // PDF템플릿을 로드합니다.
    const pdfDoc = await PDFDocument.load(await templateContent);
    // Custom폰트를 사용하기 위해 fontKit을 등록합니다.
    pdfDoc.registerFontkit(fontkit);

    // 한글 폰트를 읽어옵니다.
    const font = await pdfDoc.embedFont(await fontContent);
    // PDF템플릿의 1페이지를 읽어옵니다.
    const pages = pdfDoc.getPages();
    const firstPage = pages[0];
    
    const textInfo = {
        x: 455,
        y: 365,
        size: 12,
        font: font,
        color: rgb(0.95, 0.1, 0.1),
        lineHeight: 30
    };

    firstPage.setFont(textInfo.font);
    firstPage.setFontColor(textInfo.color);
    firstPage.setFontSize(textInfo.size)

    firstPage.drawText("샘플 텍스트", {
        x: textInfo.x,
        y: textInfo.y
    });
    
    // 편집된 PDF파일을 다운로드합니다.
    const pdfBytes = await pdfDoc.save();
    download(pdfBytes, "sample.pdf", "application/pdf");
});

---

4. Reference

pdf-lib, downloadjs, @type/downloadjs