Message icon
フッターコンテンツにスキップ
  1. IronPDF
  2. IronPDF ブログ
  3. Node PDFツール
  4. JavaScriptによるPDF作成
PDF ツール

JavaScript で PDF ファイルを作成する方法

Darrius Serrant
Darrius Serrant
更新日:

文書共有の領域では、Adobe によって開発されたポータブルドキュメントフォーマット (PDF) が、テキストが豊富で視覚的に魅力的なコンテンツの完全性を保持するために重要な役割を果たしています。 オンラインで PDF ファイルにアクセスするには通常、専用のプログラムが必要です。 今日のデジタル環境では、PDF ファイルはさまざまな重要な出版物に不可欠なものとなっています。 多くの企業は、専門的な文書や請求書を作成するために PDF ファイルに依存しています。 さらに、開発者は特定のクライアントの要件を満たすために PDF 作成ライブラリを利用することがよくあります。 現代のライブラリの登場により、PDF の生成プロセスが簡略化されました。 PDF 生成を含むプロジェクトに最適なライブラリを選択する際には、構築、読み取り、変換の機能などの要素を考慮し、シームレスな統合と最適なパフォーマンスを確保することが重要です。

JavaScript ライブラリ

たとえば、PDF 請求書のコピーを顧客が簡単にダウンロードして印刷できるようにするシナリオを考えてみましょう。 さらに、請求書の正確なレイアウトを維持し、印刷品質を保証することが重要です。

このセクションでは、HTML を PDF ドキュメントに変換および作成することに長けている高く評価されている JavaScript ライブラリの数々を詳しく調べ、効率的で正確な文書生成と変換のための多用途なツールを提供します。

1. PDFKit

PDFKit は、広大な JavaScript ライブラリエコシステムに最初に登場した PDF ライブラリの 1 つでした。 2012 年の最初のリリース以来、人気は大幅に増加し、2021 年現在も定期的にアップグレードされています。

Webpack を使用すると、PDFKit は Node ライブラリとウェブブラウザの両方をサポートし、カスタムフォントと画像の埋め込みがサポートされます。

ただし、比較で見るように、一部の PDF ライブラリは実質的に PDFKit のラッパーであり、おそらく PDFKit よりも使いやすい場合があります。

PDFKit には高レベルの API は利用できません。 ドキュメントも頻繁に難しいです。 慣れるのに少し時間がかかりますし、JavaScript を使用して PDF を生成することが必ずしも簡単な作業ではないと感じるかもしれません。

// Requiring the necessary modules for file system and PDF document creation.
const fs = require('fs');
const PDFDocument = require('pdfkit');

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

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

// Define the output file location and start writing the PDF content to it
doc.pipe(fs.createWriteStream('Demo.pdf'));

// Finalize the PDF file
doc.end();
// Requiring the necessary modules for file system and PDF document creation.
const fs = require('fs');
const PDFDocument = require('pdfkit');

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

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

// Define the output file location and start writing the PDF content to it
doc.pipe(fs.createWriteStream('Demo.pdf'));

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

2. pdfmake

従来の命令型方法で何かを生成する PDFKit とは異なり、pdfmake は宣言型のアプローチを使用します。 その結果、pdfmake ライブラリを使用することで、PDF 生成の意図された機能に集中し、特定の結果を達成する方法をライブラリに教える時間を浪費することがなくなります。

あるソリューションが有望に見える場合でも、完璧でない可能性があることを忘れないようにすることが重要です。 そのような例の 1 つは、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 to create and print a PDF document
        function CreatePdf() {
            // Define document content and styles
            var docDefinition = {
                content: [
                    { text: "Hello world" } // Text content to be included in the PDF
                ],
                defaultStyle: {}
            };
            // Create and print the PDF using pdfMake library
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <!-- Button to trigger PDF creation and printing -->
    <button onclick="CreatePdf()">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 to create and print a PDF document
        function CreatePdf() {
            // Define document content and styles
            var docDefinition = {
                content: [
                    { text: "Hello world" } // Text content to be included in the PDF
                ],
                defaultStyle: {}
            };
            // Create and print the PDF using pdfMake library
            pdfMake.createPdf(docDefinition).print();
        }
    </script>
    <!-- Button to trigger PDF creation and printing -->
    <button onclick="CreatePdf()">Print pdf</button>
</body>
</html>
HTML

JavaScriptでPDFファイルを作成する方法: 図1

3. IronPDF

IronPDFは、開発者が PDF ドキュメントを作成、閲覧、および編集する作業を容易にするために作成されました。 強力な PDF コンバータとして機能し、PDF ファイルの作成、編集、および処理用の基本 API を提供します。

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 ドキュメントを強化することができ、プロフェッショナルグレードの PDF を作成し、リッチコンテンツとインタラクティブ要素を提供します。 - セキュリティ機能: IronPDF は、不正アクセスから PDF を保護するための堅牢なセキュリティ機能を提供します。 開発者は、PDF ドキュメントに含まれる機密情報を保護するために、パスワード、デジタル署名、メタデータ、およびその他のセキュリティ設定などのセキュリティ対策を実装できます。 - 最適化されたパフォーマンス: IronPDF は最適なパフォーマンスのために設計されており、完全なマルチスレッドと非同期サポートを備えています。 これにより効率的な PDF 生成が保証され、パフォーマンスが重要なミッションクリティカルなアプリケーションに適しています。 - 包括的な機能セット: PDF ドキュメントの作成、フォーマット、編集用の 50 以上の機能を備えた IronPDF は、すべての PDF 関連のタスクに対する包括的なソリューションを提供します。 基本的なドキュメント生成から高度なカスタマイズとセキュリティまで、IronPDF は開発者のニーズを満たす幅広い機能を提供します。 以下のコードは、JavaScript を使用して HTML を完璧な PDF ファイルにレンダリングする方法を示しています:

HTML コンテンツの外観を手軽に変更するカスタム JavaScript を実行することもできます:

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

(async () => {
    // HTML content containing JavaScript to be executed upon rendering
    const htmlWithJavaScript = `<h1>This is HTML</h1>
    <script>
        document.write('<h1>This is JavaScript</h1>');
        window.ironpdf.notifyRender(); // Notify IronPDF when rendering is done
    </script>`;

    // Rendering options to enable JavaScript
    const renderOptions = {
        enableJavaScript: true,
    };

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

    // Save the PDF to a file
    await pdf.saveAs("javascript-in-html.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

(async () => {
    // HTML content containing JavaScript to be executed upon rendering
    const htmlWithJavaScript = `<h1>This is HTML</h1>
    <script>
        document.write('<h1>This is JavaScript</h1>');
        window.ironpdf.notifyRender(); // Notify IronPDF when rendering is done
    </script>`;

    // Rendering options to enable JavaScript
    const renderOptions = {
        enableJavaScript: true,
    };

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

    // Save the PDF to a file
    await pdf.saveAs("javascript-in-html.pdf");
})();
JAVASCRIPT

JavaScriptでPDFファイルを作成する方法: 図2

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

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

    // HTML content which will be affected by the custom JavaScript
    const htmlContent = "<h1>Happy New Year!</h1>";

    // Rendering options to enable and apply the custom JavaScript
    const renderOptions = {
        enableJavaScript: true,
        javascript: javascriptCode,
    };

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

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

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

    // HTML content which will be affected by the custom JavaScript
    const htmlContent = "<h1>Happy New Year!</h1>";

    // Rendering options to enable and apply the custom JavaScript
    const renderOptions = {
        enableJavaScript: true,
        javascript: javascriptCode,
    };

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

    // Save the PDF with the applied JavaScript effects
    await pdf.saveAs("executed_js.pdf");
})();
JAVASCRIPT

ダウンロード ボタンをクリックすると、上記の画像の PDF ページに表示されるように、PDF ファイルがダウンロードされます。

作成された PDF ファイルは、以下のようになります。 JavaScriptでPDFファイルを作成する方法: 図3

より詳細なチュートリアルは、IronPDF の C# Create PDF Tutorial で見つけることができます。

他の人が使用した場合、上記の JavaScript コードには悪用やセキュリティ問題の可能性があることを言及する必要があります。

結論

このようなコードをウェブページやウェブサイトに配置する際には、不正アクセスやデータセキュリティの脆弱性などのリスクを考慮することが重要です。加えて、必須の機能を備えていない可能性がある古いブラウザをサポートする必要性や、さまざまなシステムとブラウザとの互換性問題も考慮することも重要です。 IronPDF は Node.js 用だけでなく、他の人気プラットフォームにも対応しており、Python などがあります。

IronPDF is not only available for Node.js but also for other popular platforms including .NET, Java, and Python. 豊富な機能セット、シームレスな統合、強力なパフォーマンスにより、IronPDF は Node.js プロジェクト内で PDF 生成を合理化しようとする開発者にとって貴重なツールです。 さまざまな開発者ニーズに対応するために、ライブラリはライセンスのオプションを提供しており、購入することも可能です。

To accommodate various developer demands, the library provides a variety of licensing options, including a free trial license and additional developer licenses that are available for purchase. 最初の購入以外に追加の費用はありません。 There are no further expenses beyond the initial purchase.

Darrius Serrant
Darrius Serrant
  今すぐエンジニアリングチームとチャット
フルスタックソフトウェアエンジニア（WebOps）

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

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

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

関連する記事

30日間の無料体験 → 完全な製品。制限なし。クレジットカード不要。 無料トライアルを開始