フッターコンテンツにスキップ
PDF ツール

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

文書共有の領域では、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を使えば、様々なソースからPDFを生成できます。特定の要件に合わせたPDFの作成が可能です。
  • 高度なドキュメントカスタマイズ: IronPDFは、ヘッダー、フッター、添付ファイル、デジタル署名、透かし、ブックマークなどの機能を使用してPDFドキュメントを強化する開発者を支援します。 これにより、リッチなコンテンツとインタラクティブな要素を持つプロレベルのPDFを作成できます。
  • セキュリティ機能: IronPDFは、不正アクセスからPDFを保護するための強力なセキュリティ機能を提供します。 開発者は、PDFドキュメント内の機密情報を保護するために、パスワード、デジタル署名、メタデータ、およびその他のセキュリティ設定などのセキュリティ対策を実装できます。
  • 最適化されたパフォーマンス: IronPDFは最適なパフォーマンスのために設計されており、完全なマルチスレッドと非同期サポートを特徴としています。 - 包括的な機能セット: PDF ドキュメントの作成、フォーマット、編集用の 50 以上の機能を備えた IronPDF は、すべての PDF 関連のタスクに対する包括的なソリューションを提供します。
  • 包括的な機能セット: IronPDFは、PDFドキュメントの作成、フォーマット、および編集に関する50以上の機能を提供し、すべてのPDF関連タスクに対する包括的なソリューションを提供します。 基本的なドキュメント生成から高度なカスタマイズとセキュリティまで、IronPDFは開発者のニーズに応える幅広い機能を提供します。

以下のコードは、JavaScriptを使用して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");
})();
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を実行して、HTMLコンテンツの外観を簡単に変更することもできます:

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

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

ダウンロードボタンをクリックすると、上の画像のPDFページに表示されているようにPDFファイルがダウンロードされます。 作成されたPDFファイルは以下のようになります。

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

結論

他の人によって使用される場合、上記のJavaScriptコードには悪用の可能性とセキュリティの問題があることを述べておくべきです。 IronPDF は Node.js 用だけでなく、他の人気プラットフォームにも対応しており、.NETJavaPython などがあります。

IronPDFはNode.jsだけでなく、.NETJavaPythonなどの他の人気プラットフォームでも利用可能です。 このクロスプラットフォームの可用性は、異なるテクノロジースタックで作業している開発者にとっての一貫性と柔軟性を確保します。 さまざまな開発者ニーズに対応するために、ライブラリは無料トライアル ライセンスや追加の開発者ライセンスのオプションを提供しており、購入することも可能です。

さまざまな開発者の要求に応えるために、ライブラリは無料トライアルライセンスや購入可能な追加の開発者ライセンスなど、さまざまなライセンスオプションを提供しています。 $799 Liteパッケージは、永久ライセンス、30日間の返金保証、1年間のソフトウェアサポート、およびアップグレードオプションが含まれています。 初回購入以上の費用はかかりません。

Darrius Serrant
フルスタックソフトウェアエンジニア(WebOps)

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

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

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