1. 제품
  2.   PDF
  3.   JavaScript
  4.   JSPDF
 
  

오픈 소스 JavaScript API를 통해 PDF 생성

PDF 파일 생성 및 변환을 위한 오픈 소스 JavaScript 라이브러리, JavaScript를 통해 PDF에 그래픽 및 텍스트 추가.

JSPDF는 PDF 문서 생성 및 관리를 위한 오픈 소스 HTML5 클라이언트 측 솔루션입니다. 보고, 인증서, 발권 등과 같은 훌륭한 기능을 지원합니다. PDF는 웹에서 매우 인기가 있고 거의 모든 회사에서 문서와 보고서를 공유하는 데 PDF를 사용하고 있습니다. 몇 가지 명령만 사용하면 자신의 애플리케이션에 있는 모든 훌륭한 기능에 액세스하고 재사용할 수 있습니다. 

JsPDF 라이브러리에 대한 좋은 생각은 사용자가 다운로드 버튼을 클릭할 때 PDF 파일을 생성한다는 것입니다. 여기에는 PDF 문서 생성, 모양 그리기 및 PDF 파일에 이미지 삽입, PDF에 페이지 추가, 텍스트 추가 및 표시, 지도를 PDF로 내보내기, HTML을 PDF로 변환 등과 같은 여러 주요 기능에 대한 지원이 포함되었습니다.

Previous Next

JsPDF 시작하기

시작하는 가장 쉽고 권장되는 방법은 CDN 호스팅 라이브러리를 페이지에 드롭하는 것입니다. 아래는 명령입니다.

설치 코드 사용

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

JavaScript 라이브러리를 통해 PDF 문서 생성

JsPDF는 PDF 문서 생성 기능과 JavaScript 애플리케이션 내 수정 기능을 제공합니다. PDF 문서를 쉽게 생성하고 새 페이지를 추가할 수 있습니다. 새 문서를 만드는 동안 문서 방향, 단위 및 기본 페이지 형식을 정의할 수 있습니다. PDF가 생성되면 새 페이지를 쉽게 추가하고 이미지를 삽입하는 등의 작업을 쉽게 수행할 수 있습니다.

JavaScript를 통해 PDF 문서 만들기

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

JavaScript를 통해 PDF 문서에 텍스트 삽입

JsPDF API를 사용하면 JavaScript 개발자가 PDF 문서 내에 텍스트를 추가하고 표시할 수 있습니다. 텍스트를 그리려면 글꼴 이름을 정의해야 합니다. 사용 가능한 글꼴 중에서 선택할 수 있습니다. 글꼴 패밀리 및 글꼴 스타일을 변경할 수도 있습니다. 그런 다음 글꼴 크기, 텍스트 색상 등을 정의할 수 있습니다.

JavaScript를 사용하여 기존 PDF에 텍스트 추가

  //Add Text to Existing PDF 
  var doc = new jsPDF();
  doc.addHTML(document.body, function() {
  doc.text(20, 20, 'Hello world!');
  doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
  doc.addPage();
  doc.text(20, 20, 'Do you like that?');
  printData();
  });
  printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str); Optional
  }

JavaScript를 통해 PDF 문서에 그래픽 추가

JsPDF 라이브러리를 사용하면 JavaScript 전문가가 PDF 문서 내부에 그래픽을 그릴 수 있습니다. 그래픽은 항상 콘텐츠에 더 많은 가치를 더합니다. 먼저 그려진 모양 채우기 및 획 색상을 설정해야 합니다. 획 너비를 설정할 수도 있습니다. 모든 모양 그리기 기능은 중심점 좌표를 두 개의 첫 번째 매개변수로 사용합니다(삼각형 제외). 또한 마지막 매개변수 그리기 스타일을 사용합니다. 두 개의 반지름 또는 원을 전달하고, 하나의 반지름, 삼각형, 각 모서리의 좌표 등을 전달하여 타원을 그릴 수 있습니다.

JavaScript를 사용하여 PDF에 이미지 추가

  // Add image to PDF
  var img = new Image()
  img.src = 'assets/sample.png'
  pdf.addImage(img, 'png', 10, 78, 12, 15)
 한국인