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ファイルを表示する方法

更新済み 6月 13, 2023

共有:

イントロダクション

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

2.0 JavaScriptライブラリ

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

2.1 HTML2PDF

HTMLをPDFに変換する機能（HTML2PDF）は、IronPDFのコア機能の一つです。以下に、主な機能とユースケースを示します。

HTMLのレンダリング: 高度なCSSやJavaScriptを使用する複雑なWebページを含む、任意のHTMLコンテンツを正確にレンダリングします。
PDFドキュメントの生成: 印刷品質のPDFを生成し、フォント、テーブル、画像、リンクなどを完全にサポートします。
ページ設定とカスタマイズ: ページサイズ、マージン、ヘッダー、フッター、ページ番号、背景画像などの詳細な設定が可能です。

HTML2PDFの一般的な使用例としては、以下が挙げられます。

レポートの自動生成: ウェブアプリケーションからダイナミックに生成されるデータをPDFレポートに変換します。
E-コマース領収書: オンラインショップの購入確認ページをPDF形式で保存し、顧客にメールで送信します。
法的文書の作成: 契約書や法的文書をPDFとして正確に生成し、デジタル署名をサポートします。

IronPDFを使用することで、高品質なPDFを簡単にかつ迅速に生成することができます。

HTML2PDF JS、PDF、Html2Canvasの機能を一つのモジュールに統合し、ウェブページやテンプレートを完全なPDF文書ファイルに変換します。

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

サーバーにhtml2pdf JavaScriptライブラリをインストールするには、NPMを使用するか、以下の例に示すようにHTMLコードに追加します。
対象のウェブページセクションをPDFに変換するために使用されるgeneratePDFという関数を作成してください。 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() {
   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

jsPDFは、JavaScriptでPDFファイルを生成するための人気のあるライブラリです。開発者は、ウェブブラウザやNode.js環境で直接PDFを作成できます。しかし、jsPDFにはいくつかの制約があります。たとえば、複雑なレイアウトや高度な機能をサポートするのが難しい場合があります。そのため、IronPDF for Node.jsのようなプロフェッショナルなソリューションを使用することが推奨されます。IronPDF for Node.jsは、高度なPDF機能、正確なレンダリング、および多様な入力フォーマットサポートを提供します。

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);
})();

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);
})();

JAVASCRIPT

このコードでは:

PDFドキュメントを生成します (advancedPdf) アセットを含むHTMLコンテンツから。
PDFドキュメントを一時ファイルとして保存します (html-with-assets.pdf) saveAs を使用して
私たちは、openパッケージのopen関数を使用して、PDFファイルをデフォルトのシステムアプリケーションで開きます。これは通常、システムにインストールされているデフォルトのPDFビューアでPDFを開くか、デフォルトのブラウザで開きます。

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

出力は上の画像のように生成され、表示されます。 IronPDFについてさらに詳しく知りたい場合は、次をご覧くださいこれ.

3.0 結論

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

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

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

< 以前
JavaScriptでPDFファイルを作成する方法

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