브라우저의 재발견

jsPDF·QR

서버 없이 엑셀·PDF·QR 만들기

해결하는 문제

엑셀 파일, PDF, QR 코드를 만들려면 서버나 프로그램이 필요하다고 생각한다.

SheetJS로 엑셀을, jsPDF로 PDF를, QR 라이브러리로 QR 코드를 브라우저 안에서 바로 만들어 내려받습니다.

체험하기

서버 의존도

외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.

브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요

데이터가 흐르는 길

무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.

들어오는 것표 데이터와 문구
브라우저가 하는 일브라우저 안에서 파일 형식으로 조립
나오는 것XLSX, PDF, QR 이미지

쓰는 브라우저 기술

BlobURL.createObjectURLCanvas

라이브러리와 모델

SheetJSjsPDFqrcode 라이브러리

바꿀 수 있는 옵션

  • 한글 글꼴 내장 (PDF)
  • QR 오류 정정 단계
  • 시트 이름·열 너비

자주 막히는 곳

  • jsPDF는 한글 글꼴을 넣지 않으면 글자가 깨진다
  • QR에 너무 긴 주소를 넣으면 인식이 어려워진다

이 능력으로 만들 수 있는 서비스

같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.

AI 서비스
  • AI가 정리한 표를 바로 엑셀 파일로
웹 서비스
  • 행사 출입 QR 발급기
피지컬 AI
  • QR을 찍으면 기기 제어 페이지 열기

넓히는 방법

  • 명단 CSV로 QR 명찰 일괄 생성
  • 수료증 PDF 일괄 생성

지원 브라우저

PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다

코딩 에이전트에게 줄 프롬프트

복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.

이름 목록을 넣으면 사람마다 QR 코드가 들어간 명찰 PDF를 만들고, 명단은 엑셀 파일로도 내려받는 웹페이지를 만들어줘. 한글 글꼴이 깨지지 않게 해줘.

같은 분류의 능력

01 문서·파일 처리에 속한 다른 능력입니다.

무료로 보는 것

체험 페이지, 한 줄 설명, 미리보기 영상

스킬팩 구성

full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md