PDF ツール

JavaScript を使用して PDF ファイルを生成する方法

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

Darrius Serrant

更新日:7月 28, 2025

1.0 はじめに

Adobeは、テキストやグラフィックスを含む文書を共有する目的でポータブルドキュメントフォーマット（PDF）を開発しました。オンラインでPDFファイルを開くには追加のプログラムが必要です。現代の世界では、PDFファイルは重要な書類にとって非常に重要です。ドキュメントや請求書を作成するために、多くの企業がPDFファイルを使用しています。開発者は、クライアントのニーズに合ったドキュメントのPDFを生成し作成します。モダンなライブラリのおかげで、PDFを作成する能力はかつてないほど簡単になりました。プロジェクトに最適なライブラリを選択する際には、ライブラリの構築、読み取り、変換能力を含む多くの要素を考慮する必要があります。

この記事では、PDF作成のためのさまざまなJavaScriptライブラリについて説明します。私たちは、JSライブラリの特徴と使用例を検討し、以下の3つのキーアスペクトに焦点を当てます：

実行環境の互換性
タイポグラフィのためのカスタムフォントとモジュールのサポート
使いやすさ

この記事の最後までに、あなたはJavaScriptアプリケーションに最も適したPDFライブラリを選ぶことができるようになるでしょう。私たちはまた、強力で便利なPDFライブラリであるIronPDFを紹介します。

class="hsg-featured-snippet">

JavaScriptでPDFファイルを生成する手順

PDFKitライブラリのtextメソッドを使用してPDFにテキストを挿入します
JavaScriptのpdfmakeライブラリのcreatePdfメソッドを利用します
jsPDFライブラリからjsPDFクラスをインスタンス化してPDFを作成します
html2pdfライブラリのhtml2pdfメソッドに設定を渡します
IronPDFライブラリのRenderHtmlAsPdfメソッドを利用します

2.0 ライブラリ

顧客が私たちの持っている請求書をダウンロードして印刷できるようにしたいとします。この請求書が適切に印刷され、良いフォーマットになっていることも望んでいます。ここでは、この請求書をHTML形式からPDFに変換するための、最も人気のあるライブラリのいくつかを見ていきます。

2.1 PDFKit

JavaScriptの広範なエコシステムにおいて導入された最初期のPDFライブラリの1つがPDFKitです。 2012年の最初のリリース以来、人気を集めており、2021年現在も定期的に更新され続けています。PDFKitは、Node.jsとWebブラウザの両方をサポートし、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とWebブラウザの両方に対して使いやすいモジュールを提供します。

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

html2pdfはjsPDFとHtml2Canvasの機能を1つのモジュールに統合して、ウェブページやテンプレートをPDFファイルに変換します。

ウェブサイトをPDFに変換する手順は次のとおりです：

NPMを使用してサーバーにhtml2pdf JavaScriptライブラリをローカルにインストールするか、以下の例のようにHTMLコードに追加します：
PDFに変換したいウェブページの特定の部分をPDFに変換するために呼び出される「generate PDF」関数を追加します。 getElementByIdメソッドを使用して、目的のセグメントを選択することができます。
フォーマットオプションをカスタマイズし、html2pdfに渡す前に「opt」変数に追加します。これにより、PDF生成のさまざまな設定を定義できます。
HTMLページにボタンを含め、クリックされるとgeneratePDF関数をトリガーします。

<!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

IronPDF for Node.jsは、プログラムによってPDFドキュメントを作成およびカスタマイズするプロセスを簡単にします。 IronPDF は、高性能なドキュメント処理ライブラリを提供する信頼できるプロバイダー Iron Software によって開発されており、Node.js 環境内での PDF 生成のための堅牢なソリューションを提供します。 Node.js プロジェクトとシームレスに統合され、開発者に PDF の生成、フォーマット、編集を容易に行うための強力なツールを提供します。

IronPDF ライブラリには、新しいまたは既存の PDF ドキュメント内でのページの分割と結合、既存の PDF ファイルの読み取りと編集、PDF ファイルからの画像の抽出、PDF ファイルへのテキスト、グラフィック、ブックマーク、透かし、ヘッダー、フッターの追加など、Acrobat Reader を必要とせずに行うことができるさまざまな機能があります。 CSS および CSS メディアファイルから PDF ドキュメントを生成できます。 IronPDF を使用すると、新規および既存の PDF フォームを作成、アップロード、および更新できます。

IronPDF for Node.js の主な特徴:

多用途なPDF生成: IronPDFを使用すると、開発者はHTML、CSS、JavaScript、画像、その他のファイルタイプを含むさまざまなソースからPDFを生成できます。この柔軟性により、特定の要件に合わせて動的かつ視覚的に魅力的なPDFドキュメントを作成することができます。
高度なドキュメントカスタマイズ: IronPDFは、開発者がヘッダー、フッター、添付ファイル、デジタル署名、透かし、ブックマークなどの機能でPDFドキュメントを強化することを可能にします。 - セキュリティ機能: IronPDF は、不正アクセスから PDF を保護するための堅牢なセキュリティ機能を提供します。
セキュリティ機能: IronPDFは、認可されていないアクセスからPDFを保護するための強力なセキュリティ機能を提供します。 - 最適化されたパフォーマンス: IronPDF は最適なパフォーマンスのために設計されており、完全なマルチスレッドと非同期サポートを備えています。
最適化された性能: IronPDFは、最適な性能を実現するため、フルマルチスレッドと非同期のサポートを備えた設計です。 - 包括的な機能セット: PDF ドキュメントの作成、フォーマット、編集用の 50 以上の機能を備えた IronPDF は、すべての PDF 関連のタスクに対する包括的なソリューションを提供します。

包括的な機能セット: IronPDFは、PDFドキュメントの作成、フォーマット、編集のために50以上の機能を提供し、すべてのPDF関連タスクの包括的なソリューションを提供します。以下のコードは、JavaScript を使用して HTML を完璧な PDF ファイルにレンダリングする方法を示しています:

カスタム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がPDF生成に動的なJavaScriptの変更を組み込む能力を示しており、開発者がカスタマイズされた対話的なPDFドキュメントをプログラム的に作成することを可能にします。

JavaScriptを使用してPDFファイルを生成する方法：図4

3.0 結論

結論として、上記のJavaScriptコードは他の人によって悪用され、潜在的なセキュリティリスクにさられる可能性があります。ウェブサイトにこうしたコードを実装する際には、権限のないアクセスおよびデータセキュリティの脆弱性の可能性を考慮することが重要です。また、すべての必要な機能を持たない可能性がある古いブラウザのサポートを確保する必要性も含め、異なるブラウザやプラットフォーム間での互換性問題を考慮に入れるべきです。

対照的に、IronPDF Node.jsライブラリは潜在的な脅威に対する強化されたセキュリティ対策を提供します。特定のブラウザに依存せず、主要なブラウザのすべてと互換性があります。わずか数行のコードで、開発者はIronPDFを使用してPDFファイルを簡単に作成および読み取ることができます。

The library provides various licensing options to cater to different developer needs, including a free trial license for developers and additional licenses available for purchase. Liteパッケージは$799で、永久ライセンス、1年間の製品サポート、アップグレードオプションが含まれており、追加料金はありません。これらのライセンスは、開発、ステージング、プロダクション環境で使用することができます。 Additionally, it is also available for other languages like C# .NET, Java, and Python. IronPDFのウェブサイトを訪れて詳細を確認してください。

Darrius Serrant

今すぐエンジニアリングチームとチャット

フルスタックソフトウェアエンジニア（WebOps）

Darrius Serrantは、マイアミ大学でコンピュータサイエンスの学士号を取得し、Iron SoftwareでフルスタックWebOpsマーケティングエンジニアとして働いています。若い頃からコーディングに惹かれ、コンピューティングを神秘的かつアクセス可能なものとし、創造性と問題解決のための完璧な媒体と考えていました。

Iron Softwareでは、新しいものを創造することと、複雑なコンセプトをより理解しやすくすることを楽しんでいます。Resident Developerの一人として、次世代に専門知識を共有するために、学生を教えることにも志願しました。

Darriusにとって、その仕事は価値があり、実際の影響があるため、満足感があります。