Message icon
フッターコンテンツにスキップ
  1. IronPDF
  2. IronPDF ブログ
  3. Node PDFツール
  4. JavaScript PDFビューア
PDF ツール

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

Darrius Serrant
Darrius Serrant
更新日:

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

2.0 JavaScriptライブラリ

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

2.1 HTML2PDF

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

ウェブサイトからPDFを作成するための手順に従ってください:

  1. NPMを使用してhtml2pdf JavaScriptライブラリをサーバーにローカルでインストールするか、以下の例のようにHTMLコードに追加します。
  2. 対象のウェブページセクションをPDFに変換するために使用されるviewPDFという関数を作成します。 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() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">
        <!-- Content to convert to PDF -->
        <h1>Hello World!</h1>
    </div>
    <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() {
      // Select the element to convert to PDF
      const element = document.getElementById('content-to-print');

      // Define PDF formatting options
      var opt = {
        margin: 1,
        filename: 'Demopdf.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
      };

      // Create and open the PDF
      let worker = html2pdf().set(opt).from(element).toPdf().output('blob')
        .then((data) => {
          let fileURL = URL.createObjectURL(data);
          window.open(fileURL);
        });
    }
  </script>
</head>
<body>
    <div id="content-to-print">
        <!-- Content to convert to PDF -->
        <h1>Hello World!</h1>
    </div>
    <button onclick="viewPDF()">View PDF</button>
</body>
</html>
HTML

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

2.3 jsPDF

jsPDFというオープンソースソフトウェアは、JavaScriptのみを使用してPDFファイルを作成します。 それはページオブジェクトをPDFページとして生成し、提供された書式に基づいてそれをフォーマットします。 GitHubで最も頻繁に使用され、よく維持されているPDFライブラリもjsPDFと呼ばれています。 それはAMDモジュール標準に従ってエクスポートされるため、Node.jsとWebブラウザの両方で使いやすいモジュールを提供します。

PDFKitになると、そのAPIは命令的なモデルに従っており、複雑なレイアウトを構築するのが難しくなることがあります。 JavaScriptでフォントを埋め込むために必要な唯一の追加ステップは、フォントをTTFファイルに変換することであり、これは簡単な手続きです。 以下のコード例では、PDFファイルを作成し、Webブラウザの別のタブで作成されたPDFを開きます。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
  <script>
    function viewPDF() {
      // Create a new instance of jsPDF
      var pdf = new jsPDF({
        orientation: 'p',
        unit: 'mm',
        format: 'a5',
        putOnlyUsedFonts: true
      });

      // Add text to the PDF
      pdf.text("Hello World", 20, 20);

      // Open the generated PDF in a new browser tab
      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() {
      // Create a new instance of jsPDF
      var pdf = new jsPDF({
        orientation: 'p',
        unit: 'mm',
        format: 'a5',
        putOnlyUsedFonts: true
      });

      // Add text to the PDF
      pdf.text("Hello World", 20, 20);

      // Open the generated PDF in a new browser tab
      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文書の作成とカスタマイズを簡単にします。 IronPDF は、高性能なドキュメント処理ライブラリを提供する信頼できるプロバイダー Iron Software によって開発されており、Node.js 環境内での PDF 生成のための堅牢なソリューションを提供します。 Node.js プロジェクトとシームレスに統合され、開発者に PDF の生成、フォーマット、編集を容易に行うための強力なツールを提供します。

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

次のコードサンプルは、JavaScriptを使用してPDF文書を作成し、アプリケーションから直接表示します:

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

(async () => {
  try {
    // 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 pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();
import { PdfDocument } from "@ironsoftware/ironpdf";
import fs from "fs";
import open from "open";

(async () => {
  try {
    // 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 pdf.saveAs(filePath);

    // Open the PDF file using the default system application
    open(filePath);
  } catch (error) {
    console.error("Error creating or opening PDF:", error);
  }
})();
JAVASCRIPT

このコードでは：

  • HTMLコンテンツからPDFドキュメント（pdf）を生成します。
  • saveAsを使用してPDF文書を一時ファイル（html-with-assets.pdf）として保存します。
  • openパッケージのopen関数を使用して、システムのデフォルトアプリケーションを使用してPDFファイルを開きます。 これは通常、システムにインストールされているデフォルトのPDFビューア、そうでなければデフォルトブラウザでPDFを開きます。

PDFに関連するタスクに関するより多くのコード例については、このIronPDF Node.js Code Samplesページをご覧ください。

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

出力は上記の画像のように生成され、表示されます。 IronPDFについて詳しく知るには、IronPDF .NET PDF Viewer Guideをご覧ください。

3.0 結論

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

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

The library provides various licensing options to cater to different developer needs, including a free trial license for developers and additional licenses for purchase. Liteパッケージは$799で、永久ライセンス、1年間の製品サポート、アップグレードオプションが含まれており、追加料金はありません。 これらのライセンスは、開発、ステージング、プロダクション環境で使用することができます。 Additionally, IronPDF is also available for other languages like C# .NET, Java, and Python. IronPDFのウェブサイトにアクセスして、詳細をご覧ください。

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

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

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

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

関連する記事

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