PDFツール

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

更新済み 5月 23, 2023
共有:

1.0 はじめに

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

この種のライブラリを使用するプロジェクトに最適なライブラリを選択するためには、ビルド、読み取り、および変換機能を含む多くの要素を考慮する必要があります。

このチュートリアルでは、PDFを生成するためのさまざまなJavaScriptライブラリを紹介します。 JSライブラリと現実のアプリケーションシナリオを分析し、以下の3つの主要なポイントに焦点を当てます:

1.

ライブラリ 2.0

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

2.1 プレーンなJavaScriptコード

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

<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.pdf" id="myFrame" 
            frameborder="0" style="border:0;" 
                width="300" height="300">
    </iframe>
    <p>
        <input type="button" id="bt" onclick="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>
<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.pdf" id="myFrame" 
            frameborder="0" style="border:0;" 
                width="300" height="300">
    </iframe>
    <p>
        <input type="button" id="bt" onclick="print()" value="Print PDF" />
    </p>
</body>

<script>
    let print = () => {
        let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>
HTML

PDFの印刷に関しては、文書の内容をiframeを使用して表示し、その後JavaScriptを使用して内容を印刷できます。 両方の状況において、iframeが必要です。 以下の例では、ソースを持つiframeがあります (PDF). ボタンタイプの入力要素もあります。

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

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

2.2 Print.js

Print.jsはブラウザでPDFドキュメントやその他のコンテンツを印刷するためのJavaScriptライブラリです。ユーザーがウェブページから直接印刷を管理できるようにする機能を提供します。このライブラリは、多くの印刷オプションをサポートし、Web開発者に便利なツールを提供します。

Print.jsは、アプリケーション内からPDFファイルを印刷することを主な目的として作成されました。これにより、ユーザーインターフェースから離れてインポートして印刷するか、埋め込みを使用する必要がなくなります。 これは、ユーザーがPDFファイルを印刷する必要がある場合で、開いたりダウンロードしたりする必要がない特別な状況のためのものです。

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

<html>
    <head>
        <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>
        <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 id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>
<html>
    <head>
        <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>
        <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 id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>
HTML

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

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

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

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

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

    こちらは、からPDFドキュメントを生成して保存する例です HTMLファイル, HTML文字列、および URL 印刷のためのフォーマットを保持する

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

(async () => {
    const pdfFromUrl = await PdfDocument.fromUrl("https://getbootstrap.com/");
    await pdfFromUrl.saveAs("website.pdf");

    const pdfFromHtmlFile = await PdfDocument.fromHtml("design.html");
    await pdfFromHtmlFile.saveAs("markup.pdf");

    const pdfFromHtmlString = await PdfDocument.fromHtml("<p>Hello World</p>");
    await pdfFromHtmlString.saveAs("markup_with_assets.pdf");
})();
JAVASCRIPT

PDF関連の作業のより多くのコード例については、こちらをご覧ください コード例 ページ

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

3.0 結論

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

With IronPDF's straightforward integration process for frameworks and libraries built in JavaScript, excellent performance and reliable results can be anticipated across different development environments. Whether you're generating complex PDF reports, converting HTML to PDF, or ensuring compliance with PDF/A standards, IronPDF offers a robust solution tailored to your needs.

IronPDFの統合プロセスはJavaScriptで構築されたフレームワークやライブラリに対応しており、様々な開発環境において優れたパフォーマンスと信頼性の高い結果が期待できます。複雑なPDFレポートの生成、HTMLからPDFへの変換、PDF/Aの規格準拠など、IronPDFはあなたのニーズに合わせた強力なソリューションを提供します。 ドキュメント サンプルコード例や迅速な技術サポートを提供することで、開発者はすぐに稼働することができ、Node.js関連アプリケーションでプロフェッショナル品質のPDFを生成および印刷するためのトップチョイスとなります。

IronPDFは 無料試用、事前にすべての機能を試してから、十分に判断した上で決定を下すことができます。 他の言語にも対応しています。 C# .NET, Java 以下のコンテンツを日本語に翻訳してください: Python. ウェブサイトに訪問してください IronPDF 詳細については、ウェブサイトをご覧ください。 Node.js用IronPDFをダウンロードします これ.

< 以前
JavaScriptを使用してPDFファイルを生成する方法
次へ >
ReactでHTMLをPDFに変換する方法 (デベロッパーチュートリアル)

準備はできましたか? バージョン: 2024.9 新発売

無料のnpmインストール View Licenses >