ライブ環境でテストする
ウォーターマークなしで本番環境でテストしてください。
必要な場所でいつでも動作します。
完全に機能する製品
30日間のフル機能製品をお試しください。
数分で稼働させることができます。
24/5 テクニカルサポート
製品トライアル期間中にサポートエンジニアリングチームへの完全アクセス
PDFツール
JavaScriptでPDFファイルを表示する方法
公開済み 2023年6月13日
イントロダクション
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を簡単にかつ迅速に生成することができます。
HTML2PDFJS、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
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
Node.js 用 IronPDFは、プログラムによる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);
})();
JAVASCRIPT
このコードでは:
- PDFドキュメントを生成します(advancedPdf)アセットを含むHTMLコンテンツから。
- PDFドキュメントを一時ファイルとして保存します(html-with-assets.pdf)saveAs を使用して
-
私たちは、openパッケージのopen関数を使用して、PDFファイルをデフォルトのシステムアプリケーションで開きます。 これは通常、システムにインストールされているデフォルトのPDFビューアでPDFを開くか、デフォルトのブラウザで開きます。
PDF関連タスクのコード例については、こちらをご覧ください。IronPDF Node.jsコードサンプルページ
出力は上の画像のように生成され、表示されます。 IronPDFについてもっと知りたい方はIronPDF .NET PDFビューアーガイド.
3.0 結論
最後に注意すべき点として、上記の最初のページに表示されたJavaScriptコードは誤用される可能性があり、他者が使用する場合にはセキュリティリスクを引き起こす可能性があることです。 このようなコードをウェブページやウェブサイトに組み込む際には、不正アクセスやデータセキュリティの脆弱性のリスクを考慮することが重要です。 さらに、古いブラウザーや異なるオペレーティングシステムおよびブラウザーとの互換性の問題も考慮する必要があります。
対照的に、IronPDF for Node.jsライブラリは潜在的な脅威から保護するための強化されたセキュリティ対策を提供します。 特定のブラウザに依存しておらず、主要なすべてのブラウザと互換性があります。 数行のコードで、開発者は簡単にPDFファイルを作成および読み取りできます。
このライブラリは、開発者の様々なニーズに対応するため、複数のライセンスオプションを提供しています。無料試用開発者および追加用のライセンス購入ライセンス. Liteパッケージは、価格が $749 で、永久ライセンス、1年間の製品サポート、アップグレードオプションが含まれ、定期的な料金はかかりません。 これらのライセンスは、開発、ステージング、および本番環境で使用できます。 さらに、IronPDFは以下のような他の言語にも対応しています。C# .NET, Java、およびPython. ウェブサイトに訪問してくださいIronPDFのウェブサイト詳細については。
