PDFツール

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

Kannaopat Udonpant
カンナパット・ウドンパント
2023年5月23日
共有:

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が必要です。 上記の例では、ソース(PDF)を持つiframeがあります。 ボタンタイプの入力要素もあります。

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

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

2.2 Print.js

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

    ここに、印刷のための書式設定を保持するために、HTMLファイル、HTML文字列、そしてURLからPDF文書を生成して保存する例があります。

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関連タスクのコード例については、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用の無料トライアルを提供しており、十分な機能をテストした上で情報に基づいた決定を下すことができます。 他の言語としても利用可能であり、C# .NETJavaPythonなどがあります。 詳細については、IronPDFのウェブサイトをご覧ください。 IronPDF Node.js ダウンロードページからIronPDF for Node.jsをダウンロードしてください。

Kannaopat Udonpant
カンナパット・ウドンパント
ソフトウェアエンジニア
ソフトウェアエンジニアになる前に、カンナパットは日本の北海道大学から環境資源学の博士号を取得しました。学位を取得する過程で、カンナパットはバイオプロダクション工学部に所属する車両ロボティクス研究所のメンバーにもなりました。2022年には、C#のスキルを活かしてIron Softwareのエンジニアリングチームに参加し、IronPDFに注力しています。カンナパットは、IronPDFで使用されているコードの大部分を作成した開発者から直接学べることに価値を見いだしています。同僚との学び合いに加えて、Iron Softwareで働くことの社会的側面も楽しんでいます。コードやドキュメントを書いていない時には、カンナパットは通常、PS5でゲームをしたり、『The Last of Us』を再視聴したりしています。
< 以前
JavaScriptを使用してPDFファイルを生成する方法
次へ >
ReactでHTMLをPDFに変換する方法 (デベロッパーチュートリアル)