import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

PDF 도구

JavaScript로 PDF 파일을 보는 방법

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

다리우스 세란트

업데이트됨:7월 28, 2025

어도비는 텍스트와 그래픽이 많이 포함된 문서를 공유할 수 있도록 휴대용 문서 형식(PDF)을 개발했습니다. PDF 파일을 온라인에서 열려면 다른 프로그램이 필요합니다. 오늘날 중요한 출판 환경에서 PDF 파일은 필수 불가결한 요소입니다. 이러한 도구들은 기업에서 문서와 송장을 작성하는 데 자주 사용됩니다. 개발자들은 고객 요구사항을 충족하기 위해 PDF 파일을 생성합니다. 현대의 라이브러리 덕분에 PDF 파일을 만드는 것이 그 어느 때보다 쉬워졌습니다. 자체적으로 렌더링된 PDF 파일을 생성하는 프로젝트에 적합한 라이브러리를 선택할 때는 빌드, 읽기 및 변환 기능을 포함한 다양한 측면을 고려해야 합니다.

2.0 JavaScript 라이브러리

예를 들어, 고객이 청구서 사본을 다운로드하여 볼 수 있도록 하고 싶다고 가정해 보겠습니다. 이때 청구서의 정확한 레이아웃, 인쇄 품질, 페이지 수 또한 매우 중요합니다. 이 섹션에서는 PDF 문서를 보는 데 가장 널리 사용되는 라이브러리 몇 가지를 살펴보겠습니다.

2.1 HTML2PDF

HTML2PDF는 jsPDF와 Html2Canvas의 기능을 하나의 모듈로 결합하여 웹 페이지와 템플릿을 완전한 PDF 문서 파일로 변환합니다.

웹사이트에서 PDF를 생성하려면 다음 단계를 따르세요.

NPM을 사용하여 로컬 서버에 html2pdf JavaScript 라이브러리를 설치하거나 아래 예시와 같이 HTML 코드에 추가하세요.
대상 웹 페이지 섹션을 PDF로 변환하는 데 사용될 viewPDF이라는 함수를 만드세요. 원하는 세그먼트를 선택하기 위해 getElementById 함수를 사용하세요.
html2pdf에 전달하기 전에 opt 변수에 포맷 옵션을 추가하여 수정하세요. 이를 통해 PDF 생성에 대한 다양한 설정을 사용자 지정할 수 있습니다.
클릭 시 viewPDF 함수를 트리거하는 버튼을 HTML 페이지에 포함하세요. 이 함수는 PDF 파일을 생성하고 별도의 브라우저 탭에서 엽니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
    function viewPDF() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">

        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View 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 viewPDF() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">

        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>

HTML

JavaScript에서 PDF 파일 보기: 그림 1

2.3 jsPDF

jsPDF라는 오픈소스 소프트웨어는 JavaScript 만을 사용하여 PDF 파일을 생성합니다. 이 함수는 페이지 객체를 PDF 페이지로 생성하고 제공된 서식에 따라 서식을 지정합니다. GitHub 에서 가장 많이 사용되고 잘 관리되는 PDF 라이브러리 역시 jsPDF라고 불립니다. 이 라이브러리는 AMD 모듈 표준을 준수하여 내보내지므로 Node.js 와 웹 브라우저 모두에서 사용하기 쉬운 모듈을 제공합니다.

PDFKit의 API는 명령형 모델을 따르기 때문에 복잡한 레이아웃을 구축하기 어려울 수 있습니다. JavaScript 사용하여 글꼴을 임베드하는 데 필요한 유일한 추가 단계는 글꼴을 TTF 파일로 변환하는 것이며, 이는 간단한 절차입니다. 아래 코드 예제에서는 PDF 파일을 생성한 다음 웹 브라우저의 별도 탭에서 생성된 PDF 파일을 엽니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script>
    function viewPDF() {
      // 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);

      // Open the generated PDF in a new browser tab
      window.open(pdf.output('bloburl'));
    }
  </script>
</head>
<body>
  <button onclick="viewPDF()">View 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 viewPDF() {
      // 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);

      // Open the generated PDF in a new browser tab
      window.open(pdf.output('bloburl'));
    }
  </script>
</head>
<body>
  <button onclick="viewPDF()">View Pdf</button>
</body>
</html>

HTML

2.3 IronPDF

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

Node.js 용 IronPDF 의 주요 기능:

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

다음 코드 샘플은 JavaScript 사용하여 PDF 문서를 생성한 다음 애플리케이션에서 직접 보는 방법을 보여줍니다.

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

(async () => {
  try {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();

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

(async () => {
  try {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();

JAVASCRIPT

이 코드에서:

HTML 콘텐츠에서 PDF 문서(pdf)를 생성합니다.
saveAs을 사용하여 PDF 문서를 임시 파일(html-with-assets.pdf)에 저장합니다.
open 패키지의 open 함수를 사용하여 기본 시스템 응용 프로그램으로 PDF 파일을 엽니다. 일반적으로 이 기능은 시스템에 설치된 기본 PDF 뷰어에서 PDF 파일을 열거나, 그렇지 않은 경우 기본 브라우저에서 PDF 파일을 엽니다.

PDF 관련 작업에 대한 더 많은 코드 예제를 보려면 IronPDF Node.js 코드 샘플 페이지를 방문하세요.

JavaScript에서 PDF 파일 보기: 그림 2

결과는 위 이미지와 같이 생성되어 표시됩니다. IronPDF 에 대해 더 자세히 알아보려면 IronPDF .NET PDF 뷰어 가이드를 참조하십시오.

3.0 결론

마지막으로, 위 첫 페이지에 표시된 JavaScript 코드는 오용될 가능성이 있으며, 타인이 사용할 경우 보안 위험을 초래할 수 있다는 점에 유의해야 합니다. 이러한 코드를 웹 페이지나 웹사이트에 통합할 때는 무단 접근 및 데이터 보안 취약점의 위험성을 고려하는 것이 매우 중요합니다. 또한, 구형 브라우저와의 호환성 문제 및 서로 다른 운영 체제와 브라우저 간의 호환성 문제도 고려해야 합니다.

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

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

다리우스 세란트

지금 바로 엔지니어링 팀과 채팅하세요

풀스택 소프트웨어 엔지니어 (웹 운영)

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

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

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