Technology

jsPDF로 고품질 PDF 생성하기

0

PDF 문서 생성은 다양한 웹 애플리케이션에서 중요한 기능 중 하나입니다. JavaScript 라이브러리인 jsPDF는 클라이언트 측에서 PDF 문서를 손쉽게 생성할 수 있도록 도와줍니다. 특히, 한글 폰트를 적용하고 텍스트를 세밀하게 스타일링하는 것은 웹 애플리케이션의 유용성과 전문성을 높이는 중요한 요소입니다. 이 글에서는 jsPDF를 사용하여 한글 폰트를 추가하고, 텍스트를 볼드 처리하는 방법을 포함하여 다양한 스타일을 적용하는 방법을 자세히 알아보겠습니다.

1. jsPDF 설정과 기본 사용법

먼저, jsPDF 라이브러리를 설치하고 설정하는 방법을 알아보겠습니다. jsPDF를 사용하면 HTML 요소를 PDF 문서에 추가하고, 여러 페이지에 걸쳐 내용을 자동으로 분배할 수 있습니다.

import { jsPDF } from 'jspdf';

const doc = new jsPDF();
const text = "이것은 기본 텍스트입니다.";
doc.text(text, 10, 10);
doc.save("example.pdf");

위 코드는 간단한 PDF 문서를 생성하여 저장하는 기본적인 예시입니다. 이처럼 jsPDF는 간단한 API를 통해 텍스트, 이미지, 테이블 등을 PDF 문서에 쉽게 추가할 수 있습니다.

2. 한글 폰트 적용하기

기본 jsPDF는 한글 폰트를 지원하지 않기 때문에, 한글을 포함한 유니코드 문자를 제대로 표시하려면 별도의 폰트를 추가해야 합니다. 이를 위해 폰트 파일을 Base64 인코딩된 문자열로 변환하여 jsPDF의 Virtual File System(VFS)에 추가합니다.

Python으로 폰트 파일을 Base64 인코딩하기

import base64

# 폰트 파일 경로
font_file_path = 'path/to/your/font.ttf'

# 폰트 파일을 열고 내용을 읽음
with open(font_file_path, 'rb') as font_file:
    font_data = font_file.read()

# 읽은 데이터를 Base64로 인코딩
encoded_font_data = base64.b64encode(font_data)

# 인코딩된 데이터를 문자열로 변환 (Python 3.x에서 필요)
encoded_font_string = encoded_font_data.decode('utf-8')

# 인코딩된 데이터 출력
print(encoded_font_string)

# 필요한 경우, 인코딩된 데이터를 파일에 저장
with open('encoded_font.txt', 'w') as output_file:
    output_file.write(encoded_font_string)

인코딩된 폰트를 jsPDF에 추가하기

import { jsPDF } from "jspdf";

// Base64 인코딩된 폰트 데이터
const myKoreanFont = '...'; // 여기에 Base64 인코딩된 폰트 데이터를 넣습니다.

const doc = new jsPDF();

// VFS에 폰트 파일 추가
doc.addFileToVFS('MyKoreanFont.ttf', myKoreanFont);
// 폰트 등록
doc.addFont('MyKoreanFont.ttf', 'MyKoreanFont', 'normal');

// 등록한 폰트 사용
doc.setFont('MyKoreanFont'); 
doc.setFontSize(10);
doc.text("안녕하세요, jsPDF입니다!", 10, 10);
doc.save("example.pdf");

위 코드는 한글 폰트를 추가하고 사용하는 방법을 보여줍니다. 이렇게 하면 PDF 문서에 한글 텍스트를 제대로 표시할 수 있습니다.

3. 텍스트 스타일링: 특정 문장 볼드 처리하기

PDF 문서에서 텍스트를 세밀하게 스타일링하는 방법을 알아보겠습니다. jsPDF는 텍스트의 부분적인 스타일 변경을 직접적으로 지원하지 않기 때문에, 텍스트를 분할하여 각각의 스타일을 적용해야 합니다.

const doc = new jsPDF();
const textBeforeBold = "이것은 일반 텍스트입니다. ";
const boldText = "볼드 처리된 텍스트";
const textAfterBold = " 이것은 또 다른 일반 텍스트입니다.";

// 일반 텍스트 추가
doc.text(textBeforeBold, 10, 20);

// 볼드 텍스트의 시작 위치 계산 (간단한 예시)
const boldTextX = 10 + doc.getStringUnitWidth(textBeforeBold) * doc.internal.getFontSize() / 2;

// 볼드 폰트로 변경
doc.setFont('times', 'bold');
doc.text(boldText, boldTextX, 20);

// 다시 일반 텍스트로 변경
doc.setFont('times', 'normal');
const afterBoldTextX = boldTextX + doc.getStringUnitWidth(boldText) * doc.internal.getFontSize() / 2;
doc.text(textAfterBold, afterBoldTextX, 20);

doc.save("text-with-bold.pdf");

이 예시는 텍스트의 일부를 볼드로 처리하는 방법을 보여줍니다. 텍스트를 분할하고 각각의 위치를 계산하여 다른 스타일을 적용합니다.

4. 긴 텍스트 줄바꿈 처리 및 줄 간격 조정하기

긴 텍스트를 자동으로 줄바꿈하고, 줄 간격(line-height)을 조절하는 방법을 알아보겠습니다.

const doc = new jsPDF();
const longText = "이것은 매우 긴 문장입니다. 여러 줄로 나누어져 자동으로 줄바꿈 처리되어야 합니다. 이 예시에서는 각 줄 사이의 간격을 조절할 수 있습니다.";
const maxWidth = 180; // 최대 너비
const lineHeight = 10; // 줄 간격
const startX = 10;
let startY = 10;

// 긴 텍스트를 여러 줄로 나눔
const lines = doc.splitTextToSize(longText, maxWidth);

// 각 줄을 개별적으로 추가하면서 줄 간격 조절
lines.forEach(line => {
    doc.text(line, startX, startY);
    startY += lineHeight;
});

doc.save("custom-line-height.pdf");

위 코드는 긴 텍스트를 여러 줄로 나누고, 각 줄의 간격을 조절하여 PDF 문서에 추가하는 방법을 설명합니다.

결론

jsPDF를 사용하여 웹 애플리케이션에서 고품질의 PDF 문서를 생성할 수 있습니다. 한글 폰트를 추가하고 텍스트를 세밀하게 스타일링하는 방법을 통해 보다 전문적이고 읽기 쉬운 PDF 문서를 만들 수 있습니다. 이 글에서 제공한 방법들을 활용하여 다양한 스타일과 폰트를 적용해 보세요. 이를 통해 사용자에게 더 나은 경험을 제공할 수 있습니다.

Leave a Reply