푸터 콘텐츠로 바로가기
  1. IronPDF
  2. IronPDF 블로그
  3. 노드 PDF 도구
  4. JavaScript PDF 생성기
PDF 도구

JavaScript를 사용하여 PDF 파일을 생성하는 방법

다리우스 세란트
다리우스 세란트
업데이트됨:

1.0 서론

어도비는 텍스트와 그래픽이 포함된 문서를 공유하기 위한 목적으로 휴대용 문서 형식(PDF)을 개발했습니다. PDF 파일을 온라인에서 열려면 추가 프로그램이 필요합니다. 현대 사회에서 PDF 파일은 중요한 문서에 매우 중요합니다. 많은 기업들이 문서 및 송장 작성에 PDF 파일을 사용합니다. 개발자들은 고객의 요구사항을 충족하기 위해 문서의 PDF 파일을 제작하고 생성합니다. 최신 라이브러리 덕분에 PDF 파일을 생성하는 것이 그 어느 때보다 쉬워졌습니다. 프로젝트에 적합한 라이브러리를 선택할 때는 라이브러리의 빌드, 읽기 및 변환 기능을 비롯한 여러 요소를 고려해야 합니다.

이 글에서는 PDF 생성을 위한 다양한 JavaScript 라이브러리에 대해 살펴보겠습니다. 우리는 세 가지 핵심 측면에 초점을 맞춰 JS 라이브러리의 기능과 사용 사례를 살펴볼 것입니다.

  • 런타임 환경 호환성
  • 사용자 정의 글꼴 및 타이포그래피 모듈 지원
  • 사용 편의성

이 글을 끝까지 읽으시면 JavaScript 애플리케이션에 가장 적합한 PDF 라이브러리를 선택할 수 있게 될 것입니다. 또한 강력하고 편리한 PDF 라이브러리인 IronPDF 도 소개하겠습니다.

JavaScript 사용하여 PDF 파일을 생성하는 단계

  1. PDFKit 라이브러리의 `text` 메서드를 사용하여 PDF에 텍스트를 삽입할 수 있습니다.
  2. JavaScript 에서 pdfmake 라이브러리의 `createPdf` 메서드를 활용하세요.
  3. jsPDF 라이브러리에서 jsPDF 클래스를 인스턴스화하여 PDF를 생성합니다.
  4. html2pdf 라이브러리의 `html2pdf` 메서드에 설정을 전달합니다.
  5. IronPDF 라이브러리의 `RenderHtmlAsPdf` 메서드를 활용하세요.

2.0 라이브러리

고객이 저희가 보유한 송장을 다운로드하고 인쇄할 수 있도록 하고 싶다고 가정해 보겠습니다. 또한, 이 청구서가 보기 좋게 제대로 인쇄되기를 바랍니다. 여기서는 HTML 형식의 송장을 PDF로 변환하는 데 가장 인기 있는 라이브러리 몇 가지를 살펴보겠습니다.

2.1 PDFKit

광범위한 JavaScript 생태계에 소개된 가장 초창기 PDF 라이브러리 중 하나가 PDFKit입니다. PDFKit은 2012년 처음 출시된 이후 상당한 인기를 얻었으며 2021년 현재까지도 정기적인 업데이트가 이루어지고 있습니다. PDFKit은 Node.js 와 Webpack을 통한 웹 브라우저 모두를 지원하지만, 여기에 소개된 다른 라이브러리들에 비해 다소 복잡한 구조를 가질 수 있습니다. 또한, 비교에서 살펴보겠지만, 일부 PDF 라이브러리는 기본적으로 PDFKit의 래퍼입니다.

사용자 지정 글꼴 및 이미지 삽입이 지원됩니다. 하지만 상위 레벨 API는 없습니다. 또한, 관련 서류 작업이 복잡한 경우가 많습니다. 예상하시다시피, 익숙해지는 데 시간이 좀 걸리고 처음에는 PDF를 만드는 것이 가장 간단한 작업이 아니라는 것을 알게 될 것입니다.

// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');

// Create a new PDF document
const doc = new PDFDocument();

// Add your content to the document here
doc.text('Hello world!');

// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();
// Importing required modules for PDF generation
const PDFDocument = require('pdfkit');
const fs = require('fs');

// Create a new PDF document
const doc = new PDFDocument();

// Add your content to the document here
doc.text('Hello world!');

// Pipe the document to a writable stream
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();
JAVASCRIPT

2.2 pdfmake

PDFKit의 래퍼 라이브러리는 pdfmake라고 합니다. 둘 사이의 주요 차이점은 프로그래밍 패러다임에 있습니다.

pdfmake는 선언적 접근 방식을 채택하는 반면, PDFKit은 전통적인 명령형 기법을 따릅니다. 결과적으로, pdfmake 라이브러리를 사용하면 특정 결과를 달성하는 방법을 라이브러리에 지시하는 데 시간을 소비하는 대신 PDF 생성의 원하는 기능에 집중하는 것이 더 쉽습니다.

하지만 유망해 보이는 모든 것이 완벽한 것은 아니라는 점에 유의해야 합니다. Webpack을 사용하고 pdfmake에 사용자 지정 글꼴을 통합하려고 하면 문제가 발생할 수 있습니다. 유감스럽게도 이 문제에 대한 온라인 정보는 매우 제한적입니다. Webpack을 사용하지 않더라도 Git 저장소를 복제하고 글꼴 삽입 스크립트를 실행하면 간편하게 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
    <script type="text/javascript">
        function downloadPdf() {
            // Define the document structure
            var docDefinition = {
                content: [
                    { text: "Hello world" }
                ],
                defaultStyle: {}
            };
            // Create and print the PDF
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <button onclick="downloadPdf()">Print pdf</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.56/vfs_fonts.js"></script>
</head>
<body>
    <script type="text/javascript">
        function downloadPdf() {
            // Define the document structure
            var docDefinition = {
                content: [
                    { text: "Hello world" }
                ],
                defaultStyle: {}
            };
            // Create and print the PDF
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <button onclick="downloadPdf()">Print pdf</button>
</body>
</html>
HTML

위 코드의 출력 결과는 아래와 같습니다.

JavaScript를 사용하여 PDF 파일 생성하기: 그림 1

2.3 jsPDF

jsPDF는 순수 JavaScript 만을 사용하여 PDF 파일을 생성하는 오픈 소스 패키지입니다. 이 프로그램은 사용자가 제공한 서식에 따라 PDF 페이지를 생성하고 서식을 지정합니다. jsPDF는 GitHub 에서 가장 널리 사용되는 PDF 라이브러리이며, 매우 안정적이고 유지 관리가 잘 되고 있습니다. AMD 모듈 표준에 따라 내보내지므로 Node.js 와 웹 브라우저 모두에서 사용하기 쉬운 모듈을 제공합니다.

PDFKit의 API는 명령형 프로그래밍 방식을 따르기 때문에 복잡한 레이아웃을 디자인하는 데 어려움이 있을 수 있습니다. 글꼴을 임베딩하는 경우, 추가로 필요한 단계는 글꼴을 TTF 파일로 변환하는 것뿐이며, 이는 간단한 과정입니다.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script>
        function generatePDF() {
            // Create a new instance of jsPDF
            var pdf = new jsPDF({
                orientation: 'p',
                unit: 'mm',
                format: 'a5',
                putOnlyUsedFonts: true
            });
            // Add text to the PDF
            pdf.text("Hello World", 20, 20);
            // Save the PDF
            pdf.save('Demopdf.pdf');
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
    <script>
        function generatePDF() {
            // Create a new instance of jsPDF
            var pdf = new jsPDF({
                orientation: 'p',
                unit: 'mm',
                format: 'a5',
                putOnlyUsedFonts: true
            });
            // Add text to the PDF
            pdf.text("Hello World", 20, 20);
            // Save the PDF
            pdf.save('Demopdf.pdf');
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>
HTML

위 코드의 출력 결과는 아래와 같습니다.

JavaScript를 사용하여 PDF 파일 생성하기: 그림 2

2.4 html2pdf

웹 페이지와 템플릿을 PDF 파일로 변환하기 위해 html2pdf는 jsPDF와 Html2Canvas의 기능을 하나의 모듈로 통합했습니다.

웹사이트를 PDF로 변환하려면 다음 단계를 따르세요.

  1. NPM을 사용하여 html2pdf JavaScript 라이브러리를 서버에 로컬로 설치하거나 아래 예시와 같이 HTML 코드에 포함시키세요.
  2. 웹페이지의 지정된 부분을 PDF로 변환하는 "PDF 생성" 함수를 추가합니다. 사용자는 원하는 세그먼트를 선택하기 위해 getElementById 메소드를 사용할 수 있습니다.
  3. 서식 옵션을 사용자 지정하려면 html2pdf에 전달하기 전에 "opt" 변수에 추가하십시오. 이를 통해 PDF 생성에 대한 다양한 설정을 정의할 수 있습니다.
  4. 클릭 시 generatePDF 함수를 트리거하는 버튼을 HTML 페이지에 포함하세요.
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
        function generatePDF() {
            // Define the HTML content
            const page = 'Hello World!';
            // PDF options
            var opt = {
                margin: 1,
                filename: 'Demopdf.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
            };
            // Convert HTML to PDF
            html2pdf().set(opt).from(page).save();
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
        function generatePDF() {
            // Define the HTML content
            const page = 'Hello World!';
            // PDF options
            var opt = {
                margin: 1,
                filename: 'Demopdf.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { scale: 2 },
                jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
            };
            // Convert HTML to PDF
            html2pdf().set(opt).from(page).save();
        }
    </script>
</head>
<body>
    <button onclick="generatePDF()">Print Pdf</button>
</body>
</html>
HTML

아래는 위 코드의 출력 결과입니다.

JavaScript를 사용하여 PDF 파일 생성하기: 그림 3

2.5 IronPDF

Node.js 용 IronPDF PDF 문서를 프로그래밍 방식으로 생성하고 사용자 지정하는 과정을 간소화합니다. 고성능 문서 처리 라이브러리의 신뢰할 수 있는 공급업체인 Iron Software 에서 개발한 IronPDF Node.js 환경에서 PDF를 생성하기 위한 강력한 솔루션을 제공합니다. 이 라이브러리는 Node.js 프로젝트와 완벽하게 통합되어 개발자에게 PDF를 쉽게 생성, 서식 지정 및 편집할 수 있는 강력한 도구를 제공합니다.

IronPDF 라이브러리는 다양한 기능을 제공합니다. 여기에는 새 PDF 문서 또는 기존 PDF 문서의 페이지를 분할하고 병합하는 기능, 기존 PDF 파일을 읽고 편집하는 기능, PDF 파일에서 이미지를 추출하는 기능, PDF 파일에 텍스트, 그래픽, 책갈피, 워터마크, 머리글 및 바닥글을 추가하는 기능이 포함되며, 이 모든 기능을 Acrobat Reader 없이 사용할 수 있습니다. CSS 및 CSS 미디어 파일로부터 PDF 문서를 생성할 수 있습니다. IronPDF 사용하면 사용자는 새 PDF 양식을 생성, 업로드 및 업데이트할 수 있을 뿐 아니라 기존 양식도 업데이트할 수 있습니다.

Node.js 용 IronPDF 의 주요 기능:

  • 다양한 PDF 생성 기능: IronPDF 사용하면 개발자는 HTML, CSS, JavaScript, 이미지 및 기타 파일 형식을 포함한 다양한 소스에서 PDF를 생성할 수 있습니다. 이러한 유연성을 통해 특정 요구 사항에 맞춘 동적이고 시각적으로 매력적인 PDF 문서를 만들 수 있습니다.
  • 고급 문서 사용자 지정: IronPDF 개발자가 머리글, 바닥글, 첨부 파일, 디지털 서명, 워터마크 및 책갈피와 같은 기능을 사용하여 PDF 문서를 향상시킬 수 있도록 지원합니다. 이를 통해 풍부한 콘텐츠와 인터랙티브 요소를 갖춘 전문가 수준의 PDF를 제작할 수 있습니다.
  • 보안 기능: IronPDF 무단 접근으로부터 PDF를 보호하기 위한 강력한 보안 기능을 제공합니다. 개발자는 PDF 문서에 포함된 중요한 정보를 보호하기 위해 암호, 디지털 서명, 메타데이터 및 기타 보안 설정과 같은 보안 조치를 구현할 수 있습니다.
  • 최적화된 성능: IronPDF 는 완벽한 멀티스레딩 및 비동기 지원을 통해 최적의 성능을 제공하도록 설계되었습니다. 이를 통해 효율적인 PDF 생성이 보장되므로 성능이 가장 중요한 미션 크리티컬 애플리케이션에 적합합니다.

포괄적인 기능 세트: IronPDF PDF 문서 생성, 서식 지정 및 편집을 위한 50개 이상의 기능을 제공하여 모든 PDF 관련 작업에 대한 포괄적인 솔루션을 제공합니다. IronPDF 기본적인 문서 생성부터 고급 맞춤 설정 및 보안에 이르기까지 개발자의 요구를 충족하는 다양한 기능을 제공합니다.

사용자 지정 JavaScript 사용하여 PDF 파일을 생성하려면 다음 코드를 참조하세요. 이 코드는 HTML 콘텐츠를 더욱 보기 좋게 만들어 줍니다.

import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
   // Define the JavaScript code to change text color to red
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   // HTML content to be rendered
   const htmlContent = "<h1>Hello World!!</h1>";

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("result1.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
   // Define the JavaScript code to change text color to red
   const javascriptCode = "document.querySelectorAll('h1').forEach(function(el){el.style.color='red';})";

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
       javascript: javascriptCode,
   };

   // HTML content to be rendered
   const htmlContent = "<h1>Hello World!!</h1>";

   // Render HTML content to a PDF
   const pdf = await PdfDocument.fromHtml(htmlContent, { renderOptions: renderOptions });

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("result1.pdf");
})();
JAVASCRIPT

위 코드에서는 처음에 모든 <h1> 요소의 색상을 빨간색으로 변경하기 위한 JavaScript 코드 스니펫이 정의됩니다. 이 코드는 JavaScript 실행을 활성화하는 것과 함께 렌더링 옵션에 통합됩니다. 그 후, 'Hello World!!'라는 텍스트가 포함된 <h1> 요소를 포함하는 HTML 콘텐츠가 지정됩니다. 이 HTML 콘텐츠로부터 정의된 렌더링 옵션을 사용하여 PDF 문서가 생성되므로 렌더링 과정 중에 JavaScript 코드가 실행됩니다. 마지막으로, 생성된 PDF 문서는 "result1.pdf"라는 이름으로 저장됩니다. 이 코드는 IronPDF가 동적 JavaScript 수정 기능을 PDF 생성에 통합하여 개발자가 프로그래밍 방식으로 맞춤형 대화형 PDF 문서를 생성할 수 있도록 하는 기능을 보여줍니다.

JavaScript를 사용하여 PDF 파일 생성하기: 그림 4

3.0 결론

결론적으로, 위에 제시된 JavaScript 코드는 타인이 사용할 경우 오용 및 잠재적인 보안 위험에 노출될 수 있습니다. 웹사이트에 이러한 코드를 구현할 때는 무단 접근 및 데이터 보안 취약점 발생 가능성을 고려하는 것이 중요합니다. 또한, 다양한 브라우저 및 플랫폼 간의 호환성 문제도 고려해야 하며, 필요한 모든 기능을 갖추지 못한 구형 브라우저에 대한 지원도 보장해야 합니다.

이와 대조적으로 IronPDF Node.js 라이브러리는 잠재적인 위협으로부터 보호하기 위한 강화된 보안 조치를 제공합니다. 특정 브라우저에 종속되지 않으며 모든 주요 브라우저와 호환됩니다. 개발자는 IronPDF 사용하여 단 몇 줄의 코드로 PDF 파일을 쉽게 생성하고 읽을 수 있습니다.

이 라이브러리는 개발자의 다양한 요구 사항을 충족하기 위해 여러 가지 라이선스 옵션을 제공하며, 개발자를 위한 무료 평가판 라이선스와 추가 라이선스 구매 옵션도 포함되어 있습니다. Lite 패키지는 $799 가격으로 영구 라이선스, 1년 간의 제품 지원 및 업그레이드 옵션을 포함하며, 반복되는 수수료가 없습니다. 이 라이선스는 개발, 스테이징 및 프로덕션 환경에서 사용할 수 있습니다. 또한 C# .NET , Java , Python 과 같은 다른 언어에서도 사용할 수 있습니다. 자세한 내용은 IronPDF 웹사이트를 방문하세요.

다리우스 세란트
다리우스 세란트
  지금 바로 엔지니어링 팀과 채팅하세요
풀스택 소프트웨어 엔지니어 (웹 운영)

다리우스 세런트는 마이애미 대학교에서 컴퓨터 과학 학사 학위를 받았으며, Iron Software에서 풀 스택 웹 운영 마케팅 엔지니어로 근무하고 있습니다. 어린 시절부터 코딩에 매료되었던 그는 컴퓨팅이 신비로우면서도 접근하기 쉬운 분야라고 생각했고, 창의력과 문제 해결 능력을 발휘하기에 완벽한 매체라고 여겼습니다.

Iron Software에서 다리우스는 새로운 것을 만들고 복잡한 개념을 단순화하여 더 쉽게 이해할 수 있도록 하는 것을 즐깁니다. 그는 사내 개발자로서 학생들을 가르치는 데에도 자원하여 차세대 인재들과 전문 지식을 공유하고 있습니다.

다리우스에게 있어 그의 일은 가치 있고 실질적인 영향을 미치기 때문에 보람 있는 일입니다.

관련 기사

30일 무료 체험 → 모든 기능 이용 가능. 제한 없음. 카드 정보 필요 없음. 무료 체험 시작하기

아이언 서포트 팀

저희는 주 5일, 24시간 온라인으로 운영합니다.
채팅
이메일
전화해