PDFツール

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

公開済み 2023年5月23日

共有:

1.0 はじめに

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

この記事では、PDF作成のためのさまざまなJavaScriptライブラリについて説明します。次に、JSライブラリの機能と使用例について、3つの重要な側面に焦点を当てて探求します。

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

この記事を読み終えると、あなたはJavaScriptアプリケーションに最適なPDFライブラリを選択できるようになります。私たちはまた、強力で便利なPDFライブラリであるIronPDFを紹介します。
JavaScriptでPDFファイルを生成する手順

ライブラリ 2.0

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

2.1 PDFKit

PDFKitは、高品質なPDFドキュメントを生成するためのJavaScriptライブラリです。PDFKitを使用すると、プログラマは簡単に複雑なPDF文書を作成および操作できます。このツールは、テキスト、画像、ベクターグラフィックス、フォーム、コメント、注釈などをPDFに追加するための広範なオプションを提供します。

広範なJavaScriptエコシステムで最初に導入されたPDFライブラリの一つがPDFKitです。 2012年の初回リリース以来、PDFKitは大きな人気を得ており、2021年現在も定期的なアップデートを受け続けています。PDFKitはNode.jsとWebブラウザ（Webpackを通じて）の両方をサポートしていますが、ここで紹介されている他のライブラリと比較して、若干高いレベルの複雑さを持つ可能性があります。また、比較の中で見ていくように、特定のPDFライブラリは基本的にPDFKitのラッパーです。

カスタムフォントおよび画像の埋め込みがサポートされていますが、高レベルのAPIはありません。さらに、ドキュメントはしばしば複雑です。予想できるように、慣れるまでには少し時間がかかりますが、最初はPDFの作成がそれほど簡単ではないことに気付くでしょう。

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
doc.end();

const PDFDocument = require('pdfkit');
const fs  = require('fs');
// create a document the same way as above
const doc = new PDFDocument;
// add your content to the document here, as usual
doc.text('Hello world!');
// get a blob when you're done
doc.pipe(fs.createWriteStream('Demo.pdf'));
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() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                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() {
                var docDefinition = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(docDefinition).print();
            }
        </script>
        <button onclick="downloadPdf()">Print pdf</button>
    </body>
</html>

HTML

上記の結果の出力は以下に表示されます。

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

2.3 jsPDF

jsPDFは、JavaScriptでPDFファイルを生成するための人気のあるライブラリです。開発者は、ウェブブラウザやNode.js環境で直接PDFを作成できます。しかし、jsPDFにはいくつかの制約があります。たとえば、複雑なレイアウトや高度な機能をサポートするのが難しい場合があります。そのため、IronPDF for Node.jsのようなプロフェッショナルなソリューションを使用することが推奨されます。IronPDF for Node.jsは、高度なPDF機能、正確なレンダリング、および多様な入力フォーマットサポートを提供します。

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() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                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() {
                var pdf = new jsPDF({
                    orientation: 'p',
                    unit: 'mm',
                    format: 'a5',
                    putOnlyUsedFonts:true
                    });
                pdf.text("Hello World", 20, 20);
                pdf.save('Demopdf.pdf');
            }
        </script>
    </head>
    <body>
        <button onclick="generatePDF()">print Pdf</button>
    </body>
</html>

HTML

上記のコードの出力は以下の通りです。

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

2.4 html2pdf

HTMLソースコードから直接PDFを生成するためのクラスです。html2pdfを使うと、ユーザーは手動でのHTMLページの設定や調整が不要になります。次のような機能があります：

任意のウェブページURLからPDFを生成
ローカルHTMLファイルからPDFを生成
HTML文字列からPDFを生成
カスタムCSSを適用してPDF出力の様式を変更

これにより、簡単にウェブコンテンツをPDFに変換し、保存、共有、または印刷することができます。

ウェブページやテンプレートをPDFファイルに変換するために、html2pdfはjsPDFとHtml2Canvasの機能を単一のモジュールに結合しています。

ウェブサイトをPDFに変換するには、以下の手順に従ってください。

以下の例に示されているように、NPMを使用してローカルサーバーにhtml2pdf JavaScriptライブラリをインストールするか、HTMLコードに含めてください:
"指定されたウェブページのセグメントをPDFに変換する「PDF生成」機能を追加します。" getElementById メソッドを使用して、目的のセグメントを選択することができます。
次のオプションを "opt" 変数に追加してから html2pdf に渡すことで、フォーマットオプションをカスタマイズします。これにより、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() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    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() {
    const page = 'Hello World!';
    var opt = {
        margin:       1,
        filename:     'Demopdf.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    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 は、C# および VB.NET プロジェクト向けに設計された強力な PDF ライブラリです。このライブラリを使用することで、PDF ドキュメントをプログラムで生成、変換、編集、閲覧、署名、さらには解析することが可能です。また、HTML、ASPX、画像からの PDF 生成もサポートしています。テキスト抽出、フォームフィールドの操作、注釈の追加、パスワード保護など、多数の機能を備えています。

IronPDF の特徴:

生成: HTML、ASPX、画像から PDF を簡単に生成
編集: 既存の PDF ファイルの編集とページの追加、削除
閲覧: 高速で軽量な PDF ビューア
変換: PDF から HTML、テキスト、画像へ変換
解析: PDF 内のテキストや画像の抽出
署名: デジタル署名と証明書の管理

IronPDF の利点は、その使いやすさと豊富な機能にあります。例えば、数行のコードで高品質な PDF ドキュメントを生成することができます。IronPDF は、企業のドキュメント管理ソリューションから個人のプロジェクトまで、幅広いユースケースに対応しています。

IronPDF for Node.jsは、プログラム的にPDFドキュメントを作成およびカスタマイズするプロセスを簡素化します。 Iron Softwareが開発した高性能なドキュメント処理ライブラリの信頼できる提供者であるIronPDFは、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 ドキュメントを強化する能力を与えます。これにより、豊富なコンテンツとインタラクティブな要素を備えたプロフェッショナル品質のPDFを作成することができます。
セキュリティ機能: IronPDF は、不正アクセスからPDFを保護するための強力なセキュリティ機能を提供します。開発者は、PDFドキュメントに含まれる機密情報を保護するために、パスワード、デジタル署名、メタデータ、その他のセキュリティ設定などのセキュリティ対策を実装できます。
最適化された性能: IronPDF は、フルマルチスレッドと非同期サポートを特徴とするため、最適な性能を提供します。これは効率的なPDF生成を保証し、パフォーマンスが最重要のミッションクリティカルなアプリケーションに適しています。

包括的な機能セット: PDF文書の作成、フォーマット、編集のための50以上の機能を備えたIronPDFは、PDF関連のすべてのタスクに対する包括的なソリューションを提供します。基本的なドキュメント生成から高度なカスタマイズおよびセキュリティまで、IronPDF は開発者のニーズに応える幅広い機能を提供します。

PDFファイルを生成するためにカスタムJavaScript以下のコードをご覧ください。これにより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の実行を有効にします。以下のような内容を含む HTML コンテンツのその後、 <h1> 要素に「Hello World」というテキストが含まれています。!!「が指定されています。」 PDFドキュメントは、このHTMLコンテンツから定義されたレンダリングオプションを使用して生成され、レンダリングプロセス中にJavaScriptコードが実行されることを保証します。最後に、生成されたPDFドキュメントが「result1.pdf」として保存されます。このコードは、IronPDF の動的な JavaScript 修正を PDF 生成に組み込む能力を示しており、開発者がプログラムによりカスタマイズおよびインタラクティブな PDF ドキュメントを作成できるようにします。

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

3.0 結論

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

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

このライブラリは、開発者の様々なニーズに対応するため、複数のライセンスオプションを提供しています。無料試用開発者および追加用のライセンスライセンス購入可能です。 Liteパッケージは、価格が $749 で、永久ライセンス、1年間の製品サポート、アップグレードオプションが含まれ、定期的な料金はかかりません。これらのライセンスは、開発、ステージング、および本番環境で使用できます。また、他の言語でも利用可能です。C# .NET, Java以下のコンテンツを日本語に翻訳してください：Python. ウェブサイトに訪問してくださいIronPDF詳細については、ウェブサイトをご覧ください。

< 以前
JavaScriptでPDFファイルを表示する方法

次へ >
JavaScriptでPDFファイルを印刷する方法