PDFツール

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

公開済み 2023年6月13日

共有:

イントロダクション

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

JavaScriptライブラリ

例えば、お客様が当社のPDF請求書のコピーを簡単にダウンロードして印刷できるようにしたいシナリオを考えてみてください。また、請求書の正確なレイアウトを維持し、印刷品質も完璧に保つことが重要です。

このセクションでは、HTMLをPDFドキュメントに変換および作成することに優れた、数々の高評価を得ているJavaScriptライブラリを詳しく検討します。これにより、効率的かつ正確なドキュメント生成と変換のための多彩なツールが提供されます。

PDFキット

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

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

しかし、比較で見るように、いくつかのPDFライブラリは実質的にPDFKitのラッパーであり、PDFKitよりも使用が多少簡単です。

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

// including the file system module
const fs  = require('fs');

// create a document the same way as above
const Page = new PDFDocument;

// add your content to the document here, as usual
Page.text('Hello world!');

// get a blob when you're done
Page.pipe(fs.createWriteStream('Demo.pdf'));
Page.end();

// including the file system module
const fs  = require('fs');

// create a document the same way as above
const Page = new PDFDocument;

// add your content to the document here, as usual
Page.text('Hello world!');

// get a blob when you're done
Page.pipe(fs.createWriteStream('Demo.pdf'));
Page.end();

JAVASCRIPT

pdfmake

PDFKitが何かを生成するために従来の命令型手法を使用するのに対し、pdfmakeは宣言型アプローチを使用します。その結果、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 CreatePdf() {
                var doc = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(doc).print();
            }
        </script>
        <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 CreatePdf() {
                var doc = {
                    content: [
                        {text:"Hello world"}
                    ],
                    defaultStyle: {
                    }
                };
                pdfMake.createPdf(doc).print();
            }
        </script>
        <button onclick="CreatePdf()">Print pdf</button>
    </body>
</html>

HTML

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

3. IronPDF

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

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 は開発者のニーズに応える幅広い機能を提供します。

以下のコードはHTMLをレンダリングするJavaScriptピクセルパーフェクトなPDFファイルに変換してください：

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

(async () => {
   // Define the JavaScript code to change text color to red
   const htmlWithJavaScript = `<h1>This is HTML</h1>
   <script>
       document.write('<h1>This is JavaScript</h1>');
       window.ironpdf.notifyRender();
   </script>`;

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
   };

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

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("javascript-in-html.pdf");
})();

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

(async () => {
   // Define the JavaScript code to change text color to red
   const htmlWithJavaScript = `<h1>This is HTML</h1>
   <script>
       document.write('<h1>This is JavaScript</h1>');
       window.ironpdf.notifyRender();
   </script>`;

   // Create rendering options object
   const renderOptions = {
       enableJavaScript: true,
   };

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

   // Save the PDF with the executed JavaScript
   await pdf.saveAs("javascript-in-html.pdf");
})();

JAVASCRIPT

次のことも実行できますカスタムJavaScriptHTMLコンテンツの外観を簡単に変更することができます：

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>Happy New Year!</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("executed_js.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>Happy New Year!</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("executed_js.pdf");
})();

JAVASCRIPT

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

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

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

より詳細なチュートリアルはC#によるPDF作成チュートリアル.

結論

上記のJavaScriptコードは、他の人によって使用されると、誤用やセキュリティ問題の可能性があることに留意すべきです。このようなコードをウェブページやウェブサイトに配置する際、不正アクセスやデータセキュリティの脆弱性といった危険を考慮することが重要です。加えて、必要な機能がすべて揃っていない古いブラウザのサポートや、様々なシステムやブラウザとの互換性の問題も考慮する必要があります。

IronPDFはNode.jsだけでなく、他の人気プラットフォームでも利用可能です。.NET, Java、およびPython. このクロスプラットフォームの対応は、さまざまな技術スタックで作業する開発者に一貫性と柔軟性を確保します。豊富な機能セット、シームレスな統合、および堅牢なパフォーマンスを備えたIronPDFは、Node.jsプロジェクト内でPDF生成を合理化しようとする開発者にとって貴重なツールです。

様々な開発者のニーズに応えるために、ライブラリは以下を含む様々なライセンスオプションを提供しています。無料試用ライセンスと追加開発者ライセンス購入可能な $749 Lite パッケージには、永久ライセンス、30日間の返金保証、1年間のソフトウェアサポート、およびアップグレードオプションが付属しています。初期購入以外に追加費用は発生しません。

< 以前
ReactでPDFファイルを作成する方法

次へ >
JavaScriptでPDFファイルを表示する方法