다음은 더 나은 방법으로 이해하는 전체 예제입니다: jsPDF를 사용하여 PDF를 생성하는 전체 예제는 다음과 같습니다. CSS 인쇄 규칙을 처리 한 사람은 브라우저 간 호환성의 괜찮은 수준을 달성하는 것이 얼마나 어려운지 알고 있습니다 (예를 들어, 페이지 휴식 지원 테이블에서 내가 사용할 수 있습니다). 따라서 인쇄해야 하는 것을 빌드해야 할 때 항상 CSS를 피하려고 노력하며 가장 간단한 해결책은 PDF를 사용하는 것입니다. 이 문서에 첨부된 샘플 응용 프로그램을 사용하여 PDF 문서를 생성하는 프로세스를 설명합니다. 예제를 살펴보고 사용된 모든 메서드에 대해 설명합니다. 다음은 줄에 적용할 수 있는 몇 가지 기능입니다. 이 기능은 단추를 클릭한 후 호출됩니다. 함수는 예제 번호를 유일한 매개 변수로 사용합니다. PDF의 14가지 표준 글꼴은 ASCII 코드 페이지로 제한됩니다. UTF-8을 사용하려면 필요한 문자 표시를 제공하는 사용자 지정 글꼴을 통합해야 합니다. jsPDF는 .ttf 파일을 지원합니다.

따라서 PDF에 예를 들어 중국어 텍스트를 원한다면 글꼴에 필요한 중국어 문자 가 있어야합니다. 따라서 글꼴이 원하는 문자 표시를 지원하는지 또는 텍스트 대신 빈 공간이 표시되도록 합니다. 업데이트 미리 보기 또는 다운로드 단추를 클릭하면 PDF가 jsPDF를 사용하여 생성되고 위의 예에서와 같이 데이터 URI 문자열로 iframe에 전달되거나 디스크에 저장됩니다. 보시다시피 getExampleOutput 함수를 사용하여 PDF 파일의 데이터를 가져옵니다. 예제 번호를 첫 번째 매개 변수로 전달합니다. getExampleOutput 함수는 PDF 파일을 생성하는 모든 작업이 완료되는 곳입니다. 현재 jsPDF 라이브러리로 만든 PDF 개체에는 Tizen에서 아직 구현되지 않은 A 태그의 다운로드 특성을 사용하기 때문에 Tizen에서 작동하지 않는 저장 메서드가 있음을 언급 할 가치가 있습니다. 그래서 우리는 순수한 PDF 파일 데이터 (ArrayBufferUint8Array보기로 변환)를 얻고 우리 자신에 의해 저장해야합니다.

ArrayBuffer로 출력을 얻으려면 “arraybuffer” 문자열을 pdfDoc.output 메서드의 첫 번째 인수로 전달합니다. 나중에 배열 버퍼를 Uint8Array 보기로 래핑합니다. 버퍼가 개별 바이트로 해석되도록 해당 뷰를 만들어야 합니다. 20pt Times 굵은 빨간색 문자열을 설정하려면 예를 들어 이 것을 입력해야 합니다. 함수 내부에서 예제 번호의 올바른 값이 있는지 확인하고 사용자에게 파일 이름을 지정하도록 요청합니다. 위의 예에서는 image HTML DOM 요소를 addImage 함수의 첫 번째 인수로 전달했지만 base64 인코딩된 이미지 문자열일 수도 있습니다. 그러나 PDF 파일이 필요한 경우도 있습니다: 문서를 보관해야 하고 웹 외부에서 사용해야 하는 경우(예: 송장) 또는 인쇄에 대한 심층적인 제어가 필요한 경우등이 있습니다. 이 응용 프로그램과 함께 만든 PDF의 예입니다 (사진 제공 : 라파엘 레오 / 언스플래시) 이 기본 예는 jsPDF와 함께 매우 기본적인 전단지를 구축 할 수있는 방법을 보여줍니다. npm 실행 빌드를 통해 라이브러리를 빌드합니다. 이렇게하면 모든 종속성을 가져온 다음 dist 파일을 컴파일합니다. 로컬예제를 보려면 npm 시작으로 웹 서버를 시작하고 localhost:8000으로 이동하여 확인할 수 있습니다. 제목은 textAlign 함수를 사용하여 추가됩니다.