웹/하이브리드 앱에서 PDF 생성 후 다운로드하기

 

브라우저(또는 Capacitor 등 하이브리드 환경)에서 PDF를 생성해 사용자가 바로 다운로드하도록 구현하는 방법을 정리했다. 클라이언트만으로 처리하는 예제(jsPDF)와, 서버(Node.js)에서 생성 후 내려주는 예제(PDFKit) 두 가지를 포함한다. 민감 정보(회사명, 서명, 사용자 데이터 등)는 포스팅 시 모두 [placeholder]로 표기한다.

목차

• 1. 선택지: 클라이언트 vs 서버
• 2. 클라이언트에서 바로 생성 (jsPDF)
• 3. 서버에서 생성 후 다운로드 (Node + PDFKit)
• 4. 파일 저장/다운로드 UX 팁
• 5. 개인정보/보안 체크리스트

---

1. 선택지: 클라이언트 vs 서버

• 클라이언트 생성(jsPDF, pdf-lib): 소규모 문서, 네트워크 없이 즉시 다운로드. 민감 데이터가 클라이언트에 이미 있는 경우 적합.
• 서버 생성(PDFKit, Puppeteer 등): 템플릿 렌더링, 대용량/복잡 문서, 서버에서만 존재하는 데이터가 필요할 때 적합.

---

2. 클라이언트에서 바로 생성 (jsPDF)

간단한 텍스트/이미지/테이블 정도라면 jsPDF로 브라우저에서 바로 PDF를 만들고 다운로드 버튼을 제공할 수 있다.

2.1 설치

npm install jspdf

2.2 기본 예제

import jsPDF from 'jspdf';

function downloadPdf() {
  const doc = new jsPDF();
  doc.setFontSize(16);
  doc.text('PDF 생성 예제', 20, 20);
  doc.text('사용자: [user_name]', 20, 30);
  doc.text('내용: [some_text]', 20, 40);

  // 다운로드
  doc.save('sample.pdf');
}

2.3 이미지 추가 예제

// base64 혹은 data URL 이미지를 삽입
doc.addImage('[data_url_image]', 'PNG', 20, 50, 80, 40);

TIP: 표/다량의 텍스트가 필요하면 jspdf-autotable 같은 플러그인을 함께 사용한다.

---

3. 서버에서 생성 후 다운로드 (Node + PDFKit)

서버에서만 접근 가능한 데이터(예: 결제 영수증, 인증서)나 복잡한 레이아웃이 필요하면 PDF를 서버에서 생성해 바로 스트림으로 내려준다.

3.1 설치

npm install pdfkit

3.2 Express 예제

import express from 'express';
import PDFDocument from 'pdfkit';

const app = express();

app.get('/pdf', (req, res) => {
  const doc = new PDFDocument();
  res.setHeader('Content-Type', 'application/pdf');
  res.setHeader('Content-Disposition', 'attachment; filename=\"sample.pdf\"');

  doc.pipe(res);
  doc.fontSize(16).text('서버 생성 PDF', 50, 50);
  doc.text(`사용자: [user_name]`, 50, 80);
  doc.text(`내용: [some_text]`, 50, 100);
  doc.end();
});

app.listen(3000, () => console.log('PDF server on 3000'));

TIP: HTML 기반 복잡한 레이아웃이 필요하면 Puppeteer + headless Chrome 으로 HTML을 렌더링 후 PDF로 저장하는 방법도 있다.

---

4. 파일 저장/다운로드 UX 팁

• 파일명 규칙: [project]-[user]-[yyyymmdd].pdf처럼 구분 가능한 이름 부여
• 모바일: Capacitor/코르도바의 FileSystem/Share 플러그인으로 “저장” or “공유” 옵션 제공
• 테스트용 워터마크: 개발/스테이징 환경에서는 PDF에 “TEST” 워터마크로 혼동 방지

---

5. 개인정보/보안 체크리스트

• 공개 포스팅/깃헙에는 모든 민감 값(이름, 이메일, 키 등)을 [placeholder]로 마스킹
• PDF에 포함되는 개인정보는 최소화하고, 필요 시 암호화/워터마크 고려
• 서버 생성 시 HTTPS 필수, 인증된 사용자만 다운로드 가능하게 보호
• 캐시/로그에 PDF 내용이나 URL(토큰 포함)이 남지 않도록 주의

✅ 핵심 요약:

• 간단한 문서는 jsPDF 등으로 클라이언트에서 바로 생성 후 doc.save().
• 서버 데이터/복잡 레이아웃은 Node + PDFKit(또는 Puppeteer)로 생성해 스트림 다운로드.
• 민감 정보는 모두 [placeholder]로 마스킹해서 공유, 실제 키/데이터는 외부 노출 금지.
• 모바일/하이브리드 앱은 공유/저장 UX를 함께 제공하면 편리하다.

 

 

 

 카카오톡 오픈 채팅 링크

https://open.kakao.com/o/seCteX7h