Message icon
フッターコンテンツにスキップ
  1. IronPDF
  2. IronPDF ブログ
  3. Node PDFツール
  4. JavaScriptでPDFを印刷
PDF ツール

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

Darrius Serrant
Darrius Serrant
更新日:

1.0 はじめに

ポータブルドキュメントフォーマット（PDF）は、テキストやグラフィックを含むドキュメントを共有する目的でアドビによって開発されました。 オンラインでPDFドキュメントを開くには、追加のプログラムが必要です。今日の社会では、PDFファイルは重要な情報にとって非常に重要です。 多くの企業がPDFファイルを使用してドキュメントや請求書を作成しています。 クライアントのニーズに応えるために、開発者はPDFドキュメントを生成します。 現代のライブラリのおかげで、簡単にPDFを作成できるようになりました。

この種のライブラリを使用するプロジェクトの理想的なライブラリを選択するには、ビルド、読み取り、変換機能など、いくつかの要素を評価する必要があります。
このチュートリアルでは、PDFを生成するためのさまざまなJavaScriptライブラリを紹介します。 主に3つのポイントに注目して、JSライブラリと実際のアプリケーションシナリオを分析します。

  • 実行構成
  • タイピングとカスタムフォントをサポートするモジュール
  • 使いやすさ

これを読んだ後、JavaScriptアプリケーションに最適なPDFライブラリを選択できるようになります。 最後に、有用かつ効果的なPDFライブラリであるIronPDFも紹介します。

class="hsg-featured-snippet">

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

  1. PDFをiframeタグに埋め込む
  2. iframeのPDFビューアの印刷オプションにアクセスする
  3. JavaScriptを使用して現在のページのPDFを印刷する
  4. printJSメソッドを呼び出し、印刷可能なプロパティに要素IDを渡す
  5. Printメソッドを活用して.NET C#で印刷するための代替ライブラリを使用する

2.0 ライブラリ

顧客が私たちの請求書のコピーをダウンロードして印刷できるようにしたいという状況を考えてみましょう。この請求書を正確かつ適切に印刷する必要があります。 ここでは、この請求書をHTMLファイル形式からPDFに変換するための利用可能な多数のライブラリのいくつかを詳しく見ていきます。

2.1 普通のJavaScriptコード

通常、PDFファイルの内容を印刷するために、コンピュータにダウンロードし、開いて、印刷オプションを選択します。 一方、JavaScriptを使用すると、ウェブページから直接PDFファイルを印刷するのが簡単になります。 必要なのは、ウェブサイト上にあるiframeか、動的に作成する能力だけで、ドキュメントを追加して印刷できます。 JavaScriptを使用してPDFファイルを印刷する方法を示します。iframeを使用して、あるWebページ内に他のWebページを表示します。 Webページを表示するには、iframeがそのソースを知っている必要があります。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Print PDF</title>
</head>
<body>
    <!-- Embedding the PDF in an iframe -->
    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>
        <!-- Button to trigger the print function -->
        <input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
    </p>

    <script>
        // JavaScript function to print the PDF inside the iframe
        let printPdf = () => {
            // Access the iframe
            let objFra = document.getElementById('myFrame');
            // Focus the iframe's window
            objFra.contentWindow.focus();
            // Trigger the print dialog
            objFra.contentWindow.print();
        }
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Print PDF</title>
</head>
<body>
    <!-- Embedding the PDF in an iframe -->
    <iframe 
        src="Demo.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
    </iframe>
    <p>
        <!-- Button to trigger the print function -->
        <input type="button" id="bt" onclick="printPdf()" value="Print PDF" />
    </p>

    <script>
        // JavaScript function to print the PDF inside the iframe
        let printPdf = () => {
            // Access the iframe
            let objFra = document.getElementById('myFrame');
            // Focus the iframe's window
            objFra.contentWindow.focus();
            // Trigger the print dialog
            objFra.contentWindow.print();
        }
    </script>
</body>
</html>
HTML

PDFを印刷するために、iframeを使用してドキュメントの内容を表示し、JavaScriptを使用して内容を印刷できます。 どちらの場合も、iframeが必要です。 上記の例では、ソース（PDF）付きのiframeがあります。 またボタンタイプの入力要素もあります。

ボタンのonclickプロパティはprintPdfメソッドを呼び出します。

JavaScriptでPDFファイルを印刷する方法: 図1 - 印刷中

2.2 Print.js

Print.jsは、アプリ内からPDFファイルを印刷できるように主に作成されました。これにより、ユーザーインターフェースから別の場所に移動したり、インポートして印刷したり、埋め込みを使用したりせずに済みます。 これは、ユーザーがPDFファイルを印刷するだけで、開いたりダウンロードしたりする必要がない特別な状況に使用されます。

サーバー側で生成されたレポートを印刷するようにユーザーが要求した場合などに役立ちます。 これらのレポートはPDFドキュメントとして返されます。 これらのファイルは開く必要なく印刷できます。 Print.jsはアプリ内でこれらのファイルを印刷する便利な方法を提供します。

<!DOCTYPE html>
<html>
<head>
    <title>Print.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
</head>
<body>
    <!-- Area to be printed -->
    <div id="print-area" class="print-main">
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>AAA</td>
                <td>25</td>
            </tr>
            <tr>
                <td>BBB</td>
                <td>24</td>
            </tr>
        </table>
    </div>
    <!-- Button to trigger Print.js -->
    <button id="btnPrint">Print</button>

    <script>
        $(document).ready(function(){
            // When the print button is clicked
            $("#btnPrint").on("click", function(){
                // Use Print.js to print the content of #print-area
                printJS({
                    printable: 'print-area',
                    type: 'html'
                });
            });
        });
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>Print.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
    <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
</head>
<body>
    <!-- Area to be printed -->
    <div id="print-area" class="print-main">
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>AAA</td>
                <td>25</td>
            </tr>
            <tr>
                <td>BBB</td>
                <td>24</td>
            </tr>
        </table>
    </div>
    <!-- Button to trigger Print.js -->
    <button id="btnPrint">Print</button>

    <script>
        $(document).ready(function(){
            // When the print button is clicked
            $("#btnPrint").on("click", function(){
                // Use Print.js to print the content of #print-area
                printJS({
                    printable: 'print-area',
                    type: 'html'
                });
            });
        });
    </script>
</body>
</html>
HTML

上記のコードを使用して、ウェブサイトから直接PDFファイルを印刷できます。これにより、印刷した場合、「print-area」という名前のIDを持つHTML要素内にあるすべてのHTML文字列が印刷されることが示されています。

JavaScriptでPDFファイルを印刷する方法: 図2 - これらの文字列を印刷

2.3 IronPDF - Node.jsのPDFライブラリ

IronPDFは、正確さ、使いやすさ、そしてスピードに優れた包括的なNode.jsのPDFライブラリです。 HTML、URL、およびReactの画像から直接PDFを生成、編集、フォーマットするための広範な機能を提供します。 Windows、MacOS、Linux、Docker、AzureやAWSなどのクラウドプラットフォームを含むさまざまなプラットフォームをサポートしているため、IronPDFはクロスプラットフォームの互換性を保証します。 直観的なAPIを備えているため、開発者は迅速にPDF生成と操作をNode.jsプロジェクトに統合することができます。

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 ファイルにレンダリングする方法を示しています:

Here is an example of generating and saving a PDF document from HTML File, HTML String, and URL to preserve formatting for printing:

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

// An async function to demonstrate how to generate PDF documents
(async () => {
    // Create a PDF from a URL
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    // Save it to a file
    await pdfFromUrl.saveAs("website.pdf");

    // Create a PDF from a local HTML file
    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    // Save it to a file
    await pdfFromHtmlFile.saveAs("markup.pdf");

    // Create a PDF from an HTML string
    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    // Save it to a file
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();
import { PdfDocument } from "@ironsoftware/ironpdf";

// An async function to demonstrate how to generate PDF documents
(async () => {
    // Create a PDF from a URL
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    // Save it to a file
    await pdfFromUrl.saveAs("website.pdf");

    // Create a PDF from a local HTML file
    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    // Save it to a file
    await pdfFromHtmlFile.saveAs("markup.pdf");

    // Create a PDF from an HTML string
    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    // Save it to a file
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();
JAVASCRIPT

PDF関連のタスクに関するさらなるコード例については、IronPDF Code Examples for Node.jsページをご覧ください。

JavaScriptでPDFファイルを印刷する方法: 図3 - IronPDF

3.0 結論

ユーザーは上記のJavaScriptコードを見ることができますが、他の人に悪用される可能性があります。 このようにソースコードを使用することが可能です。 データの送信を危険にさらすコードをウェブサイトに追加するのはそれほど難しくありません。 上記のJavaScriptライブラリは、異なるブラウザによって異なる見方をされます。 したがって、コードはリリースする前にさまざまなシステムで実行されなければなりません。 いくつかの新しい機能は古いブラウザではサポートされていないため、ブラウザの互換性も確認する必要があります。 上記のライブラリはPDFファイルを生成することができます。 ユーザーは作業しているスクリプトにある程度のなじみがある必要もあります。

IronPDFのJavaScriptで構築されたフレームワークやライブラリの簡単な統合プロセス、優れたIronPDF Documentation for Node.jsとサンプルコードの例、および応答性の高い技術サポートを使用することで、開発者はすぐに動作を開始でき、Node.js関連のアプリケーションでプロフェッショナルグレードのPDFを生成および印刷するためのトップチョイスとして選ばれます。

IronPDFはNode.js用の無料トライアルを提供しているので、導入する前にその完全な機能をテストすることができます。 It is also available for other languages like C# .NET, Java and Python. 詳細についてはIronPDF Websiteをご覧ください。 IronPDF for Node.jsをIronPDF Node.js download pageからダウンロードしてください。

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

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

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

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

関連する記事

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