メッセージアイコン
  1. IronPDF
  2. IronPDFブログ
  3. Node PDFツール
  4. JavaScript PDFビューア
PDFツール

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

Darrius Serrant
Darrius Serrant
2023年6月13日
共有:

イントロダクション

Adobeは、豊富なテキストとグラフィックスを含むドキュメントの共有を可能にするために、ポータブルドキュメントフォーマット（PDF）を作成しました。 オンラインでPDFファイルを開くには、別のプログラムが必要です。 PDFファイルは、今日の環境において大規模な出版に不可欠です。 ビジネスでは、ドキュメントや請求書の作成によく利用されています。 開発者は顧客のニーズを満たすためにPDFファイルを生成します。 モダンライブラリーにより、PDFの作成がかつてないほど簡単になりました。 独自にレンダリングされたPDFファイルを生成するプロジェクトに適したライブラリを選択する際には、構築、読み取り、および変換機能を含むさまざまな側面を考慮する必要があります。

2.0 JavaScriptライブラリ

例えば、顧客が請求書のコピーをダウンロードして閲覧できるようにしたいシナリオを考えてみましょう。レイアウトの正確さ、印刷、および請求書のページ数も同様に重要です。このセクションでは、PDFドキュメントを表示するための最も人気のあるライブラリのいくつかを検討します。

2.1 HTML2PDF

HTML2PDF は、jsPDF と Html2Canvas の機能を単一のモジュールに組み合わせて、ウェブページやテンプレートを完全な PDF ドキュメントファイルに変換します。

次の手順に従って、ウェブサイトからPDFを作成してください。

  1. サーバーにhtml2pdf JavaScriptライブラリをインストールするには、NPMを使用するか、以下の例に示すようにHTMLコードに追加します。

  2. ターゲットとなるウェブページセクションをPDFに変換するための関数generatePDFを作成します。 getElementById関数を使用して、目的のセグメントを選択します。

  3. それをhtml2pdfに渡す前に、フォーマットオプションをopt変数に追加して変更します。 これにより、PDF生成のためのさまざまな設定をカスタマイズできます。

  4. HTMLページにボタンを含めて、クリックするとviewPDF関数がトリガーされるようにします。 この関数はPDFを生成し、別のブラウザタブで開きます。
<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
   function viewpdf() {
   const element = 'Hello World!';
   var opt = {
      margin:       1,
      filename:     'Demopdf.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    //html2pdf().set(opt).from(element).save();

    let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
    //console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })

   }
  </script>
  </head>
  <body>
    <button onclick="viewpdf()">View PDF</button>
</body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
   function viewpdf() {
   const element = 'Hello World!';
   var opt = {
      margin:       1,
      filename:     'Demopdf.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };
    // Choose the element that our invoice is rendered in.
    //html2pdf().set(opt).from(element).save();

    let worker = html2pdf().set(opt).from(element).toPdf().output('blob').then((data) => {
    //console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })

   }
  </script>
  </head>
  <body>
    <button onclick="viewpdf()">View PDF</button>
</body>
</html>
HTML

JavaScriptでPDFファイルを表示する方法: 図1

2.3 jsPDF

JavaScriptだけを使用してPDFファイルを作成するオープンソースソフトウェアであるjsPDF。 それはページオブジェクトをPDFページとして生成し、提供されたフォーマットに基づいてフォーマットします。 GitHubで最も頻繁に使われ、よく保守されているPDFライブラリもjsPDFと呼ばれています。 これは、AMDモジュール標準に準拠してエクスポートされるため、Node.jsおよびウェブブラウザの両方で使用するためのシンプルなモジュールを提供します。

PDFKitに関して言えば、そのAPIは命令型モデルに従っており、複雑なレイアウトの構築が困難になることがあります。 フォント埋め込みをJavaScriptで行う場合、必要となる唯一の追加ステップは、フォントをTTFファイルに変換することです。これは簡単な手順です。 以下のコード例では、PDFファイルを作成し、その作成したPDFをWebブラウザの別のタブで開きます。 結果は上記の画像と似たように見えるでしょう。

<!DOCTYPE html>
 <html>
     <head>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
         <script>
             function viewPDF() {
                 var pdf = new jsPDF({
                     orientation: 'p',
                     unit: 'mm',
                     format: 'a5',
                     putOnlyUsedFonts:true
                     });
                 pdf.text("Hello World", 20, 20);
                window.open(pdf.output('bloburl'))
             }
         </script>
     </head>
     <body>
         <button onclick="viewPDF()">View Pdf</button>
     </body>
 </html>
<!DOCTYPE html>
 <html>
     <head>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
         <script>
             function viewPDF() {
                 var pdf = new jsPDF({
                     orientation: 'p',
                     unit: 'mm',
                     format: 'a5',
                     putOnlyUsedFonts:true
                     });
                 pdf.text("Hello World", 20, 20);
                window.open(pdf.output('bloburl'))
             }
         </script>
     </head>
     <body>
         <button onclick="viewPDF()">View Pdf</button>
     </body>
 </html>
HTML

2.3 IronPDF

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

    以下のコードサンプルは、JavaScriptを使用してPDFドキュメントを作成し、アプリケーションから直接表示します：

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

(async () => {
   // Create a PDF from an HTML string
   const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

   // Save the PDF to a temporary file
    const filePath = "html-with-assets.pdf";
    await advancedPdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
})();
js
JAVASCRIPT

このコードでは:

  • HTMLコンテンツとアセットからPDFドキュメント（advancedPdf）を生成します。
  • saveAsを使用してPDFドキュメントを一時ファイル（html-with-assets.pdf）に保存します。

  • 私たちは、openパッケージのopen関数を使用して、PDFファイルをデフォルトのシステムアプリケーションで開きます。 これは通常、システムにインストールされているデフォルトのPDFビューアでPDFを開くか、デフォルトのブラウザで開きます。

    PDF関連のタスクのコード例については、このIronPDF Node.js コードサンプルページをご覧ください。

    JavaScriptでPDFファイルを表示する方法: 図2

    出力は上の画像のように生成され、表示されます。 IronPDFについて詳しく知るには、IronPDF .NET PDF ビューアガイドをご覧ください。

3.0 結論

最後に注意すべき点として、上記の最初のページに表示されたJavaScriptコードは誤用される可能性があり、他者が使用する場合にはセキュリティリスクを引き起こす可能性があることです。 このようなコードをウェブページやウェブサイトに組み込む際には、不正アクセスやデータセキュリティの脆弱性のリスクを考慮することが重要です。 さらに、古いブラウザーや異なるオペレーティングシステムおよびブラウザーとの互換性の問題も考慮する必要があります。

対照的に、IronPDF for Node.jsライブラリは潜在的な脅威から保護するための強化されたセキュリティ対策を提供します。 特定のブラウザに依存しておらず、主要なすべてのブラウザと互換性があります。 数行のコードで、開発者は簡単にPDFファイルを作成および読み取りできます。

このライブラリは、異なる開発者のニーズに対応するために様々なライセンスオプションを提供しており、開発者向けの無料試用ライセンスや追加の購入用ライセンスも含まれています。 Liteパッケージは、価格が$749で、永久ライセンス、1年間の製品サポート、およびアップグレードオプションが含まれ、継続的な料金は発生しません。 これらのライセンスは、開発、ステージング、および本番環境で使用できます。 さらに、IronPDFは他の言語用にも利用可能で、C# .NET、Java、およびPythonがあります。 詳細については、IronPDFのウェブサイトをご覧ください。

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

Darrius Serrantは、マイアミ大学でコンピュータサイエンスの学士号を取得しており、Iron SoftwareでフルスタックWebOpsマーケティングエンジニアとして働いています。若い頃からコーディングに魅了され、コンピューティングを神秘的でありながらアクセスしやすいものと見なし、それが創造性と問題解決のための完璧な媒体であると感じました。

Iron Softwareでは、新しいものを作り出し、複雑な概念を簡単にすることでより理解しやすくすることを楽しんでいます。彼は常駐の開発者の一人として、学生に教えることを志願し、自分の専門知識を次世代と共有しています。

Darriusにとって、彼の仕事は評価され、実際に影響があることで充実しています。

< 以前
JavaScriptでPDFファイルを作成する方法
次へ >
JavaScriptを使用してPDFファイルを生成する方法

npmでインストール

バージョン:2025.5

> npm i @ironsoftware/ironpdf

問題を報告

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

無料で始める
npm ダウンロード 無料トライアルを開始
ライセンスを表示 >
Experience the full power of IronPDF 無料トライアルを開始
Textlogo Iron Suite related to JavaScriptでPDFファイルを表示する方法

IronPDF は IRONSUITE の一部です。

10 .NET API製品オフィスドキュメントのために

2つの価格で10製品を手に入れよう   無料トライアルを開始