jsPDF 다운로드 - jsPDF 소스 코드 다운로드

jsPDF

기타 소스코드

v2.5.2

다운로드

JavaScript로 PDF를 생성하는 라이브러리입니다.

트위터 @MrRio에서 저를 만나시거나 제 회사 웹사이트를 방문해 컨설팅을 받아보세요.

jsPDF는 이제 다이어그램 전문가인 yWorks에 의해 공동 관리됩니다.

라이브 데모 | 선적 서류 비치

설치하다

권장 사항: npm에서 jsPDF를 가져옵니다.

npm install jspdf --save
# or
yarn add jspdf

또는 CDN에서 로드합니다.

 < script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js " > </ script >

또는 unpkg를 통해 항상 최신 버전을 받으세요.

 < script src =" https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js " > </ script >

이 패키지의 dist 폴더에는 다양한 종류의 파일이 포함되어 있습니다.

jspdf.es.*.js : 최신 ES2015 모듈 형식.
jspdf.node.*.js : Node.js에서 실행하기 위한 것입니다. 브라우저 API 대신 파일 로드/저장을 위해 파일 작업을 사용합니다.
jspdf.umd.*.js : UMD 모듈 형식입니다. AMD 또는 스크립트 태그 로딩의 경우.
polyfills*.js : Internet Explorer와 같은 이전 브라우저에 필요한 폴리필입니다. es 변형은 단순히 core-js 에서 필요한 모든 폴리필을 가져오고, umd 변형은 자체 포함되어 있습니다.

일반적으로 import 문에 정확한 파일을 지정할 필요는 없습니다. 빌드 도구나 Node는 자동으로 올바른 파일을 파악하므로 "jspdf"를 가져오는 것으로 충분합니다.

용법

그러면 문서 작성을 시작할 준비가 되었습니다.

 import { jsPDF } from "jspdf" ;

// Default export is a4 paper, portrait, using millimeters for units
const doc = new jsPDF ( ) ;

doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;

용지 크기, 방향 또는 단위를 변경하려면 다음을 수행할 수 있습니다.

 // Landscape export, 2×4 inches
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에서 실행

 const { jsPDF } = require ( "jspdf" ) ; // will automatically load the node version

const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ; // will save the file in the current working directory

기타 모듈 형식

AMD

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

전역

 const { jsPDF } = window . jspdf ;

const doc = new jsPDF ( ) ;
doc . text ( "Hello world!" , 10 , 10 ) ;
doc . save ( "a4.pdf" ) ;

선택적 종속성

jsPDF의 일부 기능에는 선택적 종속성이 필요합니다. 예를 들어 html2canvas 에 의존하는 html 메소드와 문자열 HTML 문서와 함께 제공되는 경우 dompurify . JsPDF는 필요할 때 동적으로 로드합니다(해당 모듈 형식(예: 동적 가져오기) 사용). Webpack과 같은 빌드 도구는 각 선택적 종속성에 대해 별도의 청크를 자동으로 생성합니다. 애플리케이션이 선택적 종속성을 사용하지 않는 경우 청크를 외부 종속성으로 정의하여 Webpack이 청크를 생성하지 못하도록 할 수 있습니다.

 // webpack.config.js
module . exports = {
  // ...
  externals : {
    // only define the dependencies you are NOT using as externals!
    canvg : "canvg" ,
    html2canvas : "html2canvas" ,
    dompurify : "dompurify"
  }
} ;

Vue CLI 프로젝트에서는 vue.config.js 파일의 configureWebpack 또는 chainWebpack 속성을 통해 외부 항목을 정의할 수 있습니다(먼저 새로운 프로젝트에서 생성해야 함).

Angular 프로젝트에서는 사용자 정의 웹팩 빌더를 사용하여 외부를 정의할 수 있습니다.

React ( create-react-app ) 프로젝트에서는 React-app-rewired 또는 꺼내기를 사용하여 외부를 정의할 수 있습니다.

TypeScript/Angular/Webpack/React/등등. 구성:

jsPDF는 다른 타사 라이브러리와 마찬가지로 가져올 수 있습니다. 이는 모든 주요 툴킷 및 프레임워크에서 작동합니다. jsPDF는 TypeScript 프로젝트용 타이핑 파일도 제공합니다.

 import { jsPDF } from "jspdf" ;

다음과 같이 meteor-project에 jsPDF를 추가할 수 있습니다.

 meteor add jspdf:core

폴리필

jsPDF가 작동하려면 최신 브라우저 API가 필요합니다. Internet Explorer와 같은 이전 브라우저에서 jsPDF를 사용하려면 폴리필이 필요합니다. 다음과 같이 필요한 모든 폴리필을 로드할 수 있습니다.

 import "jspdf/dist/polyfills.es.js" ;

또는 사전 번들로 제공되는 폴리필 파일을 로드할 수 있습니다. 이는 폴리필을 여러 번 로드하게 될 수 있으므로 권장되지 않습니다. 소규모 애플리케이션이나 빠른 POC에는 여전히 유용할 수 있습니다.

 < script src =" https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/polyfills.umd.js " > </ script >

유니코드 문자/UTF-8 사용:

PDF의 14개 표준 글꼴은 ASCII 코드 페이지로 제한됩니다. UTF-8을 사용하려면 필요한 문자 모양을 제공하는 사용자 정의 글꼴을 통합해야 합니다. jsPDF는 .ttf 파일을 지원합니다. 따라서 예를 들어 PDF에 중국어 텍스트를 포함하려면 글꼴에 필요한 중국어 글리프가 있어야 합니다. 따라서 글꼴이 원하는 글리프를 지원하는지 확인하세요. 그렇지 않으면 올바른 텍스트 대신 잘못된 문자가 표시됩니다.

jsPDF에 글꼴을 추가하려면 /fontconverter/fontconverter.html에 있는 글꼴 변환기를 사용하세요. 글꼴 변환기는 제공된 ttf 파일의 내용을 base64로 인코딩된 문자열과 jsPDF용 추가 코드로 사용하여 js 파일을 생성합니다. 생성된 js-File을 프로젝트에 추가하기만 하면 됩니다. 이제 코드에서 setFont-method를 사용하고 UTF-8로 인코딩된 텍스트를 작성할 준비가 되었습니다.

또는 fetch 또는 XMLHttpRequest 사용하여 *.ttf 파일의 내용을 이진 문자열로 로드하고 PDF 파일에 글꼴을 추가할 수 있습니다.

 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" ) ;

고급 기능

yWorks 포크와의 병합 이후 많은 새로운 기능이 있습니다. 그러나 그 중 일부는 API를 손상시키므로 두 API 모드 사이에 API 전환이 있습니다.

"compat" API 모드에서 jsPDF는 MrRio의 원본 버전과 동일한 API를 가지며 이는 플러그인과의 완전한 호환성을 의미합니다. 그러나 변환 행렬 및 패턴과 같은 일부 고급 기능은 작동하지 않습니다. 이것이 기본 모드입니다.
"고급" API 모드에서 jsPDF에는 yWorks-fork 버전에서 사용되는 API가 있습니다. 이는 패턴, FormObject 및 변환 매트릭스와 같은 모든 고급 기능을 사용할 수 있음을 의미합니다.

호출하여 두 모드 사이를 전환할 수 있습니다.

 doc . advancedAPI ( doc => {
  // your code
} ) ;
// or
doc . compatAPI ( doc => {
  // your code
} ) ;

JsPDF는 콜백이 실행된 후 자동으로 원래 API 모드로 다시 전환됩니다.

지원하다

귀하의 질문이 Stackoverflow https://stackoverflow.com/questions/tagged/jspdf에서 이미 처리되었는지 확인하세요. jspdf 태그를 사용하여 자유롭게 질문하세요.

기능 요청, 버그 보고서 등은 문제로 매우 환영받습니다. 버그 신고는 다음 지침을 따라야 합니다.

버그는 mcve로 보고되어야 합니다.
코드가 제대로 들여쓰기되고 형식이 지정되었는지 확인하세요(코드 블록 주위에 ``` 사용).
실행 가능한 예제를 제공하십시오.
문제가 실제로 선택한 프레임워크가 아닌 jspdf와 관련되어 있음을 확인하고 표시해 보십시오.

기여

jsPDF는 커뮤니티의 도움 없이는 살아갈 수 없습니다! 기능이 빠졌다고 생각하거나 버그를 발견했다면 한두 시간 정도 여유를 갖고 끌어오기 요청을 준비하시기 바랍니다. 단순히 이 프로젝트에 관심이 있고 도움을 주고 싶다면 공개 문제, 특히 "버그"라는 라벨이 붙은 문제를 살펴보세요.

기여 가이드에서 jsPDF 구축 및 테스트에 대한 정보를 찾을 수 있습니다.

크레딧

코드베이스에 큰 기여를 한 Willow Systems Corporation의 Daniel Dotsenko에게 큰 감사를 드립니다.
2009년에 우리를 소개해준 Ajaxian.com에 감사드립니다. (Internet Archive Wayback Machine 참조)
ttf 파일 지원을 프로그래밍하고 크고 오랫동안 기다려온 기능을 제공한 GH Lee(sphilee)에게 특별히 감사드립니다.
패치나 버그 보고서에 기여한 다른 모든 사람. 당신은 흔들린다.

라이센스(MIT)

본 소프트웨어 및 관련 문서 파일("소프트웨어")의 사본을 취득한 모든 사람에게 사용, 복사, 수정, 병합에 대한 권리를 포함하되 이에 국한되지 않고 제한 없이 소프트웨어를 취급할 수 있는 권한이 무료로 부여됩니다. , 소프트웨어 사본을 게시, 배포, 재라이센스 부여 및/또는 판매하고, 소프트웨어를 제공받은 사람에게 다음 조건에 따라 그렇게 하도록 허용합니다.

소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않고 명시적이든 묵시적이든 어떠한 종류의 보증 없이 "있는 그대로" 제공됩니다. 어떠한 경우에도 작성자나 저작권 보유자는 계약, 불법 행위 또는 기타 행위로 인해 소프트웨어나 사용 또는 기타 거래와 관련하여 발생하는 모든 청구, 손해 또는 기타 책임에 대해 책임을 지지 않습니다. 소프트웨어.

확장하다

추가 정보