import {PdfDocument} from "@ironsoftware/ironpdf"; (async () => { // Create a PDF from an HTML string const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>"); // Export the PDF to a file await pdf.saveAs("output.pdf"); // Advanced Example with HTML Assets // Load external HTML assets: Images, CSS, and JavaScript. const htmlContentWithAssets = "<img src='icons/iron.png'>"; const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets); // Save the PDF with loaded assets await advancedPdf.saveAs("html-with-assets.pdf"); })();

PDF ツール

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

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Darrius Serrant

更新日:7月 28, 2025

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

2.0 JavaScriptライブラリ

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

2.1 HTML2PDF

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

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

NPMを使用してhtml2pdf JavaScriptライブラリをサーバーにローカルでインストールするか、以下の例のようにHTMLコードに追加します。
対象のウェブページセクションをPDFに変換するために使用されるviewPDFという関数を作成します。 getElementById関数を使用して、希望のセグメントを選択します。
html2pdfに渡す前に、書式設定オプションをopt変数に追加して変更します。これにより、PDF生成のためのさまざまな設定をカスタマイズできます。
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ドキュメントを強化することを可能にします。これにより、リッチなコンテンツとインタラクティブな要素を持つプロレベルのPDFを作成できます。
セキュリティ機能: IronPDFは、認可されていないアクセスからPDFを保護するための強力なセキュリティ機能を提供します。開発者は、PDFドキュメント内の機密情報を保護するために、パスワード、デジタル署名、メタデータ、およびその他のセキュリティ設定などのセキュリティ対策を実装できます。
最適化された性能: IronPDFは、最適な性能を実現するため、フルマルチスレッドと非同期のサポートを備えた設計です。 - 包括的な機能セット: PDF ドキュメントの作成、フォーマット、編集用の 50 以上の機能を備えた IronPDF は、すべての PDF 関連のタスクに対する包括的なソリューションを提供します。
総合的な機能セット: IronPDFは、PDF文書の作成、書式設定、編集のための50以上の機能を備え、PDFに関連するすべてのタスクの包括的なソリューションを提供します。基本的なドキュメント生成から高度なカスタマイズとセキュリティまで、IronPDFは開発者のニーズに応える幅広い機能を提供します。

次のコードサンプルは、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 for .NET PDF Viewer Guideをご覧ください。

3.0 結論

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

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

ライブラリは、開発者のさまざまなニーズに応じたさまざまなライセンスオプションを提供しており、開発者向けの無料トライアルライセンスや、購入用の追加ライセンスがあります。 Liteパッケージは$799で、永久ライセンス、1年間の製品サポート、アップグレードオプションが含まれており、追加料金はありません。これらのライセンスは、開発、ステージング、プロダクション環境で使用することができます。また、IronPDFは他の言語でも利用可能であり、C# .NET、Java、Pythonなどで利用できます。 IronPDFのウェブサイトにアクセスして、詳細をご覧ください。

Darrius Serrant

今すぐエンジニアリングチームとチャット

フルスタックソフトウェアエンジニア（WebOps）

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

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

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