JSPDF를 사용하여 웹 페이지에서 PDF 생성

JSPDF : 클라이언트 PDF 생성을위한 강력한 도구, 페이지 요소의 미세 제어 코어 포인트 :

JSPDF는 클라이언트 측에서 직접 PDF 파일을 생성 할 수있는 JavaScript 라이브러리로 처리 속도를 높입니다. 특히 문서에서 요소의 위치, 크기 및 페이징의 정확한 제어에 적합합니다. JSPDF 라이브러리는 기본 PDF 파일 생성에 쉽게 사용하기 쉽지만 제한된 문서로 인해 복잡한 프로젝트에 더 어려울 수 있습니다. 그러나 PDF에 텍스트, 이미지 및 모양을 추가 할 수있는 기능을 제공하고 위치와 크기의 정확한 제어를 제공합니다.

JSPDF 라이브러리는 API를 사용하여 확장 할 수 있습니다. 와 같은 함수를 추가 할 수 있고 , , 및 메소드를 사용하여 텍스트 속성을 변경할 수 있습니다.

JSPDF를 사용하면 다중 페이지 PDF를 만들고 "자동화 가능한"플러그인을 사용하여 테이블을 추가하고 하이퍼 링크를 포함하여 테이블을 추가 할 수 있습니다. 그러나 브라우저 보안 제한으로 인해 사용자는 생성 된 PDF의 특정 저장 위치를 ​​지정할 수 없습니다.
휴대용 문서 형식 (PDF)은 데스크탑 게시 및 사무실 자동화 분야의 주요 혁신입니다.
• 는 웹 게시에 널리 사용되지만 불행히도 종종 HTML로 구축되어야하는 컨텐츠를 대체하는 데 종종 잘못 사용됩니다. 이것은 유용성, 접근성, SEO 등에 대한 많은 질문으로 이어집니다.
그러나 그러나 일부 경우에도 PDF 파일이 필요합니다. 보관 된 문서가 필요하고 네트워크 외부 (예 : 송장) 또는 인쇄 제어가 필요한 경우 사용해야합니다.
• PDF를 쉽게 생성 할 수있는 방법을 연구 할 수 있도록 인쇄 제어가 필요합니다. textAlign() 이 기사의 목적은 단순히 PDF를 만드는 방법을 설명하는 것뿐만 아니라 (이를 수행하는 간단한 방법이 많이 있습니다) PDF 파일이 문제를 해결할 수있는 위치에 초점을 맞추고 JSPDF를 간단하게 돕는 방법에 중점을 두는 것입니다. 도구. setFontSize() 인쇄 처리 setFont() CSS 인쇄 규칙을 다루는 사람은 괜찮은 크로스 브라우저 호환성을 달성하기가 얼마나 어려운지 이해합니다 (예 : 사용할 수있는 페이지 브레이크 지원 테이블을 확인하십시오). 따라서 인쇄해야 할 것을 만들어야 할 때 항상 CSS 사용을 피하려고 노력합니다. 가장 쉬운 솔루션은 PDF를 사용하는 것입니다. setTextColor() 내가 여기서 말하는 것은 PDF 변환에 대한 간단한 HTML이 아닙니다. (나는 그러한 도구를 여러 가지 시도했지만 그중 어느 누구도 나를 완전히 만족시키지 못했습니다.) 나의 목표는 요소, 페이지 브레이크 등의 위치와 크기를 완전히 제어하는 ​​것입니다. setFontType() 과거에는 PHP 도구 인 FPDF를 사용하여 이러한 종류의 컨트롤을 쉽게 제공하고 많은 플러그인으로 쉽게 확장 할 수있었습니다.
불행히도, 도서관은 포기 된 것 같습니다 (2011 년으로 거슬러 올라가는 마지막 버전) (업데이트 : 실제로 최신 버전은 2015 년 12 월에 출시 된 것 같습니다). 파일은 클라이언트 측에서 직접 구축 할 수 있으므로 더 빨리 생성됩니다).
• 몇 달 전, 프로젝트를 시작했을 때 JS 라이브러리를 검색했고 결국 JSPDF와 PDFMAKE라는 두 명의 후보자를 찾았습니다. PDFMake는 잘 문서화되어 사용하기 쉬운 것으로 보이지만 베타이기 때문에 JSPDF를 선택했습니다.

  jspdf

  를 사용하여 PDF를 빌드하십시오 JSPDF 문서화는 일부 데모와 함께 페이지를 포함하여 상당히 짧고 소스 파일 (또는 JSDOC 페이지)의 더 많은 정보가 있으므로 복잡한 프로젝트에이를 사용하는 것이 처음에는 약간 어려울 수 있습니다.

  어쨌든, JSPDF는 기본 PDF 파일을 생성하기가 매우 쉽습니다. 간단한 "Hello World"예를 살펴 보겠습니다 이 HTML 페이지는 단일 페이지 PDF 파일을 생성하여 컴퓨터에 저장합니다. 먼저 JSPDF 라이브러리 (이 경우 cdnjs.com에서)에 링크 한 다음 JSPDF 인스턴스를 작성하고 텍스트 줄을 추가 한 다음 hello_world.pdf로 결과를 저장해야합니다. 는 버전 1.0.272를 사용했으며 최신이 아닙니다. 작성 당시 최신 버전은 1.1.135이지만 많은 문제가 있으므로 이전 버전을 사용하고 있습니다.

  기본 PDF 파일을 작성하는 것이 얼마나 쉬운 지 알 수 있습니다 (JSPDF 웹 사이트에서 더 많은 예제를 찾을 수 있음).

  더 복잡한 콘텐츠를 구축 해 보겠습니다.

  전단지 품목

  몇 달 전에 간단한 전단지를 만들기위한 응용 프로그램을 구축하라는 요청을 받았습니다. 여행사 서비스를 다루는 더 큰 프로젝트의 일부이며 실제 전단지 섹션에는 일부 JSON 데이터가 채워져 있습니다.

  <code class="language-javascript">var pdf = new jsPDF();
  pdf.text(30, 30, 'Hello world!');
  pdf.save('hello_world.pdf');</code>

  전단지의 주요 목적은 여행사 상점 창에 표시 할 특별 제안을 쉽게 표시하는 방법을 제공하는 것입니다.

  이 기사의 앱을 재조정하고 모든 서버 측 기능을 제거하고, 단순화 된 전단지 디자인, 레거시 브라우저 호환성을 제거했으며, 부트 스트랩 3 및 jQuery를 사용하여 매우 간단한 UI를 구축했습니다.

  이 데모는 Firefox 및 Chrome과 잘 작동하는 반면 Explorer (또는 Edge)는 미리보기를 표시 할 수는 없지만 생성 된 PDF 만 다운로드 할 수 있습니다.

  이것은 앱 (사진 출처 : Rafael Leão/Unsplash)을 사용하여 생성 된 PDF 예입니다.

  런닝 가능한 데모는이 기사의 끝이나 코드펜에서 직접 찾을 수 있습니다. Codepen이 iframe에 결과 페이지를로드하므로 iframes에로드 된 PDF 미리보기에는 Chrome 및 Safari에 몇 가지 문제가있어 미리보기가 표시되지 않습니다. (가능하다면 Firefox를 사용하거나 개인 웹 사이트에서 데모를 사용해보십시오).

  전단지 빌더

  사용자 인터페이스를 사용하면 사용자가 기본 데이터 (제목, 요약 및 가격)를 삽입 할 수 있습니다. 이미지를 추가하도록 선택할 수 있습니다. 그렇지 않으면 그레이 박스의 "특별 제안"제목이 표시됩니다.

  기타 데이터 (에이전트 이름 및 해당 웹 사이트 URL 및 로고)는 응용 프로그램 코드에 포함됩니다.

  PDF는 iframe (Explorer 또는 Edge 제외)에서 미리보기 또는 직접 다운로드 할 수 있습니다.

  "업데이트 미리보기"또는 "다운로드"버튼을 클릭 할 때 PDF는 JSPDF를 사용하여 생성되고 위의 예와 같이 데이터 URI 문자열로 IFRAME에 전달되거나 디스크에 저장됩니다.

  PDF 생성 먼저 다음 옵션을 사용하여 새 JSPDF 객체 인스턴스를 생성합니다. 초상화 방향 (P), 밀리미터 유닛 (MM), "A4"형식.
  addimage 함수를 사용하여 이미지를 추가하십시오. PDF 페이지에 배치 된 모든 객체는 정확하게 위치해야합니다. 각 객체 좌표를 처리하려면 선언 된 장치를 사용해야합니다.
  이미지는 Base64 인코딩이어야합니다. 프록시 로고는이 형식으로 스크립트에 내장되어 있으며 사용자로드 된 이미지는 $ ( '#flyer-Image')의 readasdataurl 메소드를 사용하여 인코딩됩니다. 리스너 변경.

  <code class="language-javascript">var pdf = new jsPDF();
  pdf.text(30, 30, 'Hello world!');
  pdf.save('hello_world.pdf');</code>

  제목은 Textalign 함수를 사용하여 추가됩니다. 이 기능은 JSPDF 코어의 일부가 아니지만 저자가 제안한 것처럼 API를 사용하여 라이브러리를 쉽게 확장 할 수 있습니다. Flyer Builder 스크립트 상단에서 Textalign () 함수를 찾을 수 있습니다.

  이 함수는 텍스트 문자열의 x 좌표를 중앙에 계산 한 다음 기본 텍스트 () 메소드를 호출합니다.

  텍스트 속성을 변경하려면 , , 및 메소드를 사용할 수 있습니다.

  <code class="language-javascript">var pdf = new jsPDF('p', 'mm', 'a4');</code>

  예를 들어, 20pt 배가 굵은 빨간색 문자열을 설정하려면 다음을 입력해야합니다.

  "특별 제안"회색 상자와 가격 서클은 두 가지 유사한 방법을 사용합니다. 둘 다 왼쪽 상단 코너 좌표, 크기 값 (첫 번째 케이스의 너비 및 높이 및 두 번째 케이스의 반경)이 필요합니다.

  스타일 매개 변수는 물체의 충전 및 스트로크 속성을 나타냅니다. 유효한 스타일에는 다음이 포함됩니다. s [기본값] 뇌졸중의 경우 [기본값], 패딩의 경우 F, 패딩 및 스트로크의 경우 DF (또는 FD)가 포함됩니다.

  충전 및 스트로크 속성에는 및

  로 사전 설정되어야하며, 이는 rgb 값과

  <code class="language-javascript">// pdf.addImage(base64_source, image format, X, Y, width, height)
  pdf.addImage(agency_logo.src, 'PNG', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);</code>

  가 필요하며 PDF 문서 생성의 시작 부분에서 선언 된 단위의 linewidth 값이 필요합니다.

  완전한 코드는 Codepen 데모에서 찾을 수 있습니다. (외부 웹 사이트에 액세스 할 수 없으므로 Codepen 링크를 여기에 삽입해야합니다. 제공 할 수 없습니다)

  결론

  <code class="language-javascript">pdf.textAlign(flyer_title, {align: "center"}, 0, _y);</code>

  이 기본 예제는 JSPDF를 사용하여 매우 기본적인 전단지를 구축하는 방법을 보여줍니다. setFontSize() 사용은 간단 할 수 있지만 완전한 문서가 부족하면 각 단계가 매우 복잡해집니다. setFont() 나는 여전히 PDFMAKE와 같은 다른 솔루션에 중점을 둔 다른 솔루션을 찾고 있습니다. 그러나 결국, 정말 명확한 솔루션은 CSS 규칙을 인쇄하는 브라우저를 더 잘 지원하는 것입니다! setTextColor() setFontType() (FAQ 부품은 여기에 포함되어야합니다. 내용은 원래 텍스트와 동일하지만 필요에 따라 형식을 조정할 수 있습니다)

  .

위 내용은 JSPDF를 사용하여 웹 페이지에서 PDF 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!