jsPDF

KO | EN

gitlite — search

#ai-agent #python #dsh-plugin #mcp-server #agentic-ai #automation #genpark #llm-tools #deepseek-harness #ai-agents #dsh #claude-code

★ 31,274 Open GitHub ↗

누구나 쉽고 빠르게 사용할 수 있는 클라이언트 사이드 JavaScript PDF 생성 라이브러리.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ![jsPDF](https://parall.ax/parallax-2016/img/svg/jspdf-logo.svg)
[![Continous Integration](https://github.com/MrRio/jsPDF/actions/workflows/continuous-integration.yml/badge.svg)](https://github.com/MrRio/jsPDF/actions/workflows/continuous-integration.yml?query=branch%3Amaster)
[![Code Climate](https://codeclimate.com/repos/57f943855cdc43705e00592f/badges/2665cddeba042dc5191f/gpa.svg)](https://codeclimate.com/repos/57f943855cdc43705e00592f/feed)
[![Test Coverage](https://codeclimate.com/repos/57f943855cdc43705e00592f/badges/2665cddeba042dc5191f/coverage.svg)](https://codeclimate.com/repos/57f943855cdc43705e00592f/coverage)
[![GitHub license](https://img.shields.io/github/license/MrRio/jsPDF.svg)](https://github.com/MrRio/jsPDF/blob/master/LICENSE)
[![Total alerts](https://img.shields.io/lgtm/alerts/g/MrRio/jsPDF.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/MrRio/jsPDF/alerts/)
[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/MrRio/jsPDF.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/MrRio/jsPDF/context:javascript)
[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
\*\*JavaScript로 PDF를 생성하기 위한 라이브러리입니다.\*\*
[트위터에서 저를 팔로우하세요](http://twitter.com/MrRio): [@MrRio](http://twitter.com/MrRio) 또는 컨설팅을 위해 [제 회사의 웹사이트](http://parall.ax)를 방문해 주세요.
jsPDF는 이제 [yWorks - 다이어그램 전문가들](https://www.yworks.com/)이 공동으로 유지보수하고 있습니다.
## [라이브 데모](http://raw.githack.com/MrRio/jsPDF/master/) | [문서](http://raw.githack.com/MrRio/jsPDF/master/docs/)
## 설치
권장 사항: npm을 통해 jsPDF를 가져옵니다:
```sh
npm install jspdf --save
# 또는
yarn add jspdf
```
또는 [unpkg](https://unpkg.com/browse/jspdf/)를 통해 항상 최신 버전을 가져올 수 있습니다.
```html
```
이 패키지의 `dist` 폴더에는 다양한 종류의 파일이 포함되어 있습니다:
- \*\*jspdf.es.\\*.js\*\*: 모던 ES2015 모듈 형식입니다.
- \*\*jspdf.node.\\*.js\*\*: Node 환경에서 실행하기 위한 것입니다. 브라우저 API 대신 파일 작업을 사용하여 파일을 로드/저장합니다.
- \*\*jspdf.umd.\\*.js\*\*: UMD 모듈 형식입니다. AMD 또는 스크립트 태그 로딩용입니다.
- \*\*polyfills\\*.js\*\*: Internet Explorer와 같은 구형 브라우저에 필요한 폴리필입니다. es 버전은 `core-js`에서 필요한 모든 폴리필을 단순히 가져오고, umd 버전은 자체 포함되어 있습니다.
일반적으로 import 문에서 정확한 파일을 지정할 필요는 없습니다. 빌드 도구나 Node가 자동으로 올바른 파일을 찾아주므로 "jspdf"를 임포트하는 것만으로 충분합니다.
## 사용법
이제 문서를 만들 준비가 되었습니다:
```javascript
import { jsPDF } from "jspdf";
// 기본 내보내기는 a4 용지, 세로 방향, 단위로 밀리미터를 사용합니다.
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");
```
용지 크기, 방향 또는 단위를 변경하려면 다음과 같이 할 수 있습니다:
```javascript
// 가로 방향 내보내기, 2×4 인치
const doc = new jsPDF({
orientation: "landscape",
unit: "in",
format: [4, 2]
});
doc.text("Hello world!", 1, 1);
doc.save("two-by-four.pdf");
```
### Node.js에서 실행하기
```javascript
const { jsPDF } = require("jspdf"); // node 버전을 자동으로 로드합니다.
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf"); // 현재 작업 디렉토리에 파일을 저장합니다.
```
### 기타 모듈 형식

**AMD**
```js
require(["jspdf"], ({ jsPDF }) => {
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");
});
```

**전역 설정 (Globals)**
```js
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");
```
## 보안 (Security)
사용자 입력을 jsPDF에 전달하기 전에 반드시 살균(sanitization) 처리를 할 것을 강력히 권장합니다!
보안 취약점 신고는 [SECURITY.md](https://github.com/parallax/jsPDF/blob/master/SECURITY.md)를 참고해 주세요.
### Node.js에서 로컬 파일 시스템의 파일 읽기
Node.js 환경에서 실행할 때, jsPDF는 기본적으로 로컬 파일 시스템에서 파일을 읽는 것을 제한합니다.
강력히 권장하는 방법: 런타임이 접근을 제어할 수 있도록 Node의 권한 플래그를 사용하세요.
```sh
node --permission --allow-fs-read=... ./scripts/generate.js
```
자세한 내용은 [Node's documentation](https://nodejs.org/api/permissions.html)을 참고하세요. 가져온 모든 JavaScript 파일(모든 종속성 포함)을 `--allow-fs-read` 플래그에 포함해야 한다는 점에 유의하세요.
대체 방법(권장하지 않음): 스크립트에서 `jsPDF.allowFsRead`를 설정하여 jsPDF가 특정 파일을 읽도록 허용할 수 있습니다.
```js
import { jsPDF } from "jspdf";
const doc = new jsPDF();
doc.allowFsRead = ["./fonts/\*", "./images/logo.png"]; // ./fonts 아래의 모든 것과 단일 파일 허용
```
경고: 플래그는 런타임에 의해 강제되고 더 강력한 보안을 제공하므로, `jsPDF.allowFsRead`보다는 Node 플래그 사용을 강력히 권장합니다.
### 선택적 종속성 (Optional dependencies)
jsPDF의 일부 기능은 선택적 종속성이 필요합니다. 예를 들어 `html` 메서드는 `html2canvas`에 의존하며, 문자열 HTML 문서가 제공될 경우 `dompurify`에도 의존합니다. jsPDF는 필요할 때 이를 동적으로 로드합니다(각각의 모듈 형식, 예를 들어 동적 가져오기 사용). Webpack과 같은 빌드 도구는 선택적 종속성 각각에 대해 별도의 청크를 자동으로 생성합니다. 애플리케이션에서 선택적 종속성을 전혀 사용하지 않는 경우, 외부 종속성(external dependencies)으로 정의하여 Webpack이 청크를 생성하지 못하도록 방지할 수 있습니다.
```js
// webpack.config.js
module.exports = {
// ...
externals: {
// 외부 종속성으로 사용하지 않는 종속성만 정의하세요!
canvg: "canvg",
html2canvas: "html2canvas",
dompurify: "dompurify"
}
};
```
\*\*Vue CLI\*\* 프로젝트에서는 `vue.config.js` 파일(새 프로젝트의 경우 먼저 생성해야 함)의 [configureWebpack](https://cli.vuejs.org/config/#configurewebpack) 또는 [chainWebpack](https://cli.vuejs.org/config/#chainwebpack) 속성을 통해 externals를 정의할 수 있습니다.
\*\*Angular\*\* 프로젝트에서는 [custom webpack builders](https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack)를 사용하여 externals를 정의할 수 있습니다.
\*\*React\*\* (`create-react-app`) 프로젝트에서는 [react-app-rewired](https://github.com/timarney/react-app-rewired)를 사용하거나 ejecting을 통해 externals를 정의할 수 있습니다.
### TypeScript/Angular/Webpack/React/기타 설정 (Configuration):
jsPDF는 다른 일반적인 서드파티 라이브러리처럼 가져와서 사용할 수 있습니다. 이는 모든 주요 툴킷 및 프레임워크에서 작동합니다. 또한 jsPDF는 TypeScript 프로젝트를 위한 타입 파일도 제공합니다.
```js
import { jsPDF } from "jspdf";
```
Meteor 프로젝트에 jsPDF를 다음과 같이 추가할 수 있습니다:
```
meteor add jspdf:core
```
### 폴리필 (Polyfills)
jsPDF가 정상적으로 작동하려면 최신 브라우저 API가 필요합니다. Internet Explorer와 같은 구형 브라우저에서 jsPDF를 사용하려면 폴리필이 필요합니다. 필요한 모든 폴리필을 다음과 같이 로드할 수 있습니다:
```js
import "jspdf/dist/polyfills.es.js";
```
또는 미리 번들된 폴리필 파일을 로드할 수도 있습니다. 폴리필을 여러 번 로드하게 될 수 있으므로 권장하지 않습니다. 하지만 소규모 애플리케이션이나 빠른 POC(개념 증명)에는 여전히 유용할 수 있습니다.
## 유니코드 문자 / UTF-8 사용 (Use of Unicode Characters / UTF-8):
PDF의 14가지 표준 폰트는 ASCII 코드 페이지로 제한됩니다. UTF-8을 사용하려면 필요한 글꼴(glyph)을 제공하는 사용자 정의 폰트를 통합해야 합니다. jsPDF는 .ttf 파일을 지원합니다. 따라서 예를 들어 PDF에 한글이나 중국어 텍스트를 넣으려면 해당 폰트에 필요한 글꼴이 포함되어 있어야 합니다. 올바른 텍스트 대신 깨진 문자가 표시되지 않도록 폰트가 원하는 글꼴을 지원하는지 확인하세요.
jsPDF에 폰트를 추가하려면 다음 주소의 폰트 변환기를 사용하세요.
[/fontconverter/fontconve

rter.html](https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html).
fontconverter는 제공된 ttf 파일의 내용을 base64로 인코딩된 문자열과 jsPDF용 추가 코드로 포함하는 js 파일을 생성합니다. 생성된 이 js 파일을 프로젝트에 추가하기만 하면 됩니다.
이제 코드에서 `setFont` 메서드를 사용하여 UTF-8로 인코딩된 텍스트를 작성할 준비가 완료되었습니다.
또는 `fetch`나 `XMLHttpRequest`를 사용하여 `*.ttf` 파일의 내용을 바이너리 문자열로 로드한 후 PDF 파일에 폰트를 추가할 수도 있습니다.
```js
const doc = new jsPDF();
const myFont = ... // load the \*.ttf font file as binary string
// add the font to jsPDF
doc.addFileToVFS("MyFont.ttf", myFont);
doc.addFont("MyFont.ttf", "MyFont", "normal");
doc.setFont("MyFont");
```
## 고급 기능 (Advanced Functionality)
[yWorks fork](https://github.com/yWorks/jsPDF)와의 병합 이후 많은 새로운 기능이 추가되었습니다. 하지만 일부 기능은 API 변경(breaking)을 수반하므로, 다음과 같이 두 가지 API 모드 간의 전환을 제공합니다:
- "compat" API 모드에서 jsPDF는 MrRio의 원본 버전과 동일한 API를 가지며, 이는 플러그인과의 완전한 호환성을 의미합니다. 다만 변환 행렬(transformation matrices)이나 패턴 같은 일부 고급 기능은 작동하지 않습니다. 이 모드가 기본값입니다.
- "advanced" API 모드에서 jsPDF는 yWorks 포크 버전에서 익숙했던 API를 제공합니다. 이는 패턴, FormObjects, 변환 행렬과 같은 모든 고급 기능을 사용할 수 있음을 의미합니다.
다음과 같이 호출하여 두 모드 사이를 전환할 수 있습니다:
```javascript
doc.advancedAPI(doc => {
// your code
});
// or
doc.compatAPI(doc => {
// your code
});
```
jsPDF는 콜백이 실행된 후 자동으로 원래 API 모드로 전환됩니다.
## 지원 (Support)
질문이 Stackoverflow에 이미 다뤄져 있는지 확인해 주세요.
`jspdf` 태그를 사용하여 그곳에 자유롭게 질문해 주시기 바랍니다.
기능 요청, 버그 신고 등은 이슈(issues)로 환영합니다. 버그 신고 시 다음 가이드라인을 따라야 합니다:
- 버그는 [mcve](https://stackoverflow.com/help/mcve) 형식으로 신고해야 합니다.
- 코드가 적절히 들여쓰기 및 [포맷팅](https://help.github.com/articles/basic-writing-and-formatting-syntax/#quoting-code)되어 있는지 확인하세요 (코드 블록 주변에 ``` 사용).
- 실행 가능한 예제를 제공하세요.
- 이슈가 사용 중인 프레임워크가 아니라 실제로 jspdf와 관련된 것임을 확인하고 이슈에 표시하도록 노력하세요.
## 기여하기 (Contributing)
jsPDF는 커뮤니티의 도움 없이는 유지될 수 없습니다! 누락된 기능이 있다고 생각되거나 버그를 발견한 경우, 1~2시간 정도 시간을 내어 풀 리퀘스트(pull request)를 준비하는 것을 고려해 주세요. 단순히 이 프로젝트에 관심이 있고 돕고 싶다면, 열린 이슈들, 특히 "bug" 라벨이 붙은 이슈들을 살펴보세요.
jsPDF 빌드 및 테스트에 대한 정보는 [기여 가이드](https://github.com/MrRio/jsPDF/blob/master/CONTRIBUTING.md#pull-requests)에서 확인할 수 있습니다.
## 크레딧 (Credits)
- 코드베이스에 엄청난 기여를 해주신 [Willow Systems Corporation](https://github.com/willowsystems)의 Daniel Dotsenko에게 깊은 감사를 표합니다.
- [2009년에 저희를 소개해 준](http://web.archive.org/web/20111011192314/http://ajaxian.com/archives/dynamically-generic-pdfs-with-javascript) Ajaxian.com에 감사드립니다. (인터넷 아카이브 웨이백 머신 참고)
- ttf 파일 지원을 프로그래밍하고 오랫동안 요청되어 온 주요 기능을 제공해 주신 GH Lee ([sphilee](https://github.com/sphilee))님께 특별한 감사를 드립니다.
- 패치나 버그 신고에 기여해 주신 모든 분들께 감사드립니다. 여러분이 최고입니다.
## 라이선스 (MIT)
Copyright
(c) 2010-2025 James Hall, https://github.com/MrRio/jsPDF
(c) 2015-2025 yWorks GmbH, https://www.yworks.com/
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice

본 허가 고지사항은 Software의 모든 복사본 또는 중요한 부분에 포함되어야 합니다.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

jsPDF

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README