JSPDFでその場でWebページからPDFを生成する

JSPDF：クライアントPDF生成のための強力なツール、ページ要素の細かい制御

コアポイント：

• JSPDFは、クライアント側でPDFファイルの生成を直接生成することを可能にするJavaScriptライブラリであり、それにより処理が高速化されます。ドキュメント内の要素の位置、サイズ、ページングの正確な制御に特に適しています。
• JSPDFライブラリは、基本的なPDFファイルの生成に使いやすいですが、ドキュメントが限られているため、複雑なプロジェクトではより困難になる可能性があります。ただし、PDFにテキスト、画像、形状を追加する機能を提供し、位置とサイズの正確な制御を提供します。
• JSPDFライブラリは、APIを使用して拡張できます。 textAlign()、setFontSize()、setFont()、setTextColor()メソッドを使用してテキストプロパティを変更でき、テキストプロパティを変更できます。 setFontType()
JSPDFでは、マルチページPDFの作成、「自動化可能な」プラグインを使用したテーブルの追加、およびハイパーリンクを含むこともできます。ただし、ブラウザのセキュリティ制限により、ユーザーは生成されたPDFの特定の保存場所を指定することはできません。

ポータブルドキュメント形式（PDF）は、デスクトップパブリッシングおよびオフィスオートメーションの分野における主要なイノベーションです。

Web Publishingでも広く使用されていますが、残念ながら、HTMLで構築されるべきコンテンツを置き換えるために、誤って使用されることがよくあります。これは、使いやすさ、アクセシビリティ、SEOなどに関する多くの質問につながります。

ただし、場合によってはPDFファイルが必要です。アーカイブドキュメントが必要であり、ネットワークの外側（請求書など）の外で使用する必要がある場合、または印刷の深い制御が必要な場合。

PDFを簡単に生成する方法を研究するように促すのは、制御の印刷の必要性です。 この記事の目的は、単にPDFを作成する方法（これを行うには多くの簡単な方法があります）を説明することだけでなく、PDFファイルが問題を解決できる場所やJSPDFのようにSimpleを支援する方法にも焦点を当てることです。ツール。

Print Processing CSS印刷ルールを扱った人は誰でも、まともなクロスブラウザーの互換性を達成することがどれほど難しいかを理解しています（たとえば、使用できますか？したがって、印刷しなければならないものを構築する必要があるとき、私は常にCSSの使用を避けようとします。最も簡単な解決策はPDFを使用することです。 ここで私が話しているのは、単純なHTMLからPDF変換ではありません。 （私はそのようなツールをいくつか試しましたが、それらのどれも私を完全に満足させるものではありません。）私の目標は、要素、ページブレイクなどの位置とサイズを完全に制御することです。

過去には、この種の制御を簡単に提供し、多くのプラグインで簡単に拡張できるPHPツールであるFPDFを使用していました。 残念ながら、図書館は放棄されたようです（その最後のバージョンは2011年にさかのぼります）（更新：実際、最新バージョンは2015年12月にリリースされているようです）が、いくつかのJavaScriptライブラリのおかげで、現在PDFですファイルは、クライアント側に直接構築できます（より速く生成されるように）。

数ヶ月前、プロジェクトを開始したとき、JSライブラリを検索し、最終的にはJSPDFとPDFMakeの2つの候補者を見つけました。 PDFMakeは十分に文書化されており、使いやすいようですが、ベータ版であるため、JSPDFを選択しました。

JSPDFを使用してPDFをビルドします

JSPDFドキュメントは、いくつかのデモとソースファイル（またはそのJSDOCページ）のより多くの情報を含むページを含む非常に短いため、最初は複雑なプロジェクトにそれを使用することは少し難しい場合があることを忘れないでください。

とにかく、JSPDFは基本的なPDFファイルを生成するのが非常に簡単です。単純な「Hello World」例を見てみましょう

このHTMLページは、単一ページのPDFファイルを生成し、コンピューターに保存します。まず、JSPDFライブラリ（この場合はcdnjs.comから）にリンクし、JSPDFインスタンスを作成し、テキストの行を追加し、結果をhello_world.pdfとして保存する必要があります。

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

バージョン1.0.272を使用したことに注意してください。最新のものではありません。執筆時点では、最新バージョンは1.1.135ですが、多くの問題があるため、以前のバージョンを使用しています。

基本的なPDFファイルを構築するのがどれほど簡単かを見ることができます（JSPDF Webサイトでより多くの例を見つけることができます）。

より複雑なコンテンツを構築してみましょう。

フライヤー項目

数ヶ月前にいくつかの簡単なフライヤーを作成するためのアプリケーションを構築するように頼まれました。これは、旅行代理店サービスを扱うより大きなプロジェクトの一部であり、Real FlyerセクションにはいくつかのJSONデータが入力されています。

フライヤーの主な目的は、旅行代理店の店舗ウィンドウに表示される特別オファーを簡単に表示する方法を提供することです。

この記事のアプリを再スケジュールし、すべてのサーバー側の機能を削除し、シンプルなフライヤー設計を削除し、レガシーブラウザの互換性を取り除き、Bootstrap 3とjQueryを使用して非常にシンプルなUIを構築しました。

このデモはFirefoxとChromeでうまく機能しますが、Explorer（またはEdge）ではプレビューを表示することはできませんが、生成されたPDFのみをダウンロードできます。

これは、アプリを使用して作成されたPDFの例です（写真ソース：RafaelLeão/Unsplash）

この記事の最後に、またはCodepenで直接実行可能なデモを見つけることができます。 CodePenは結果ページをiframeにロードするため、IFRAMEでロードされたPDFプレビューにはChromeとSafariにいくつかの問題があり、プレビューの表示を防ぐことに注意してください。 （可能であれば、Firefoxを使用するか、私の個人的なWebサイトでデモを試してください）。

フライヤービルダー

ユーザーインターフェイスを使用すると、ユーザーは基本的なデータ（タイトル、概要、価格）を挿入できます。画像を追加することを選択できます。そうしないと、グレーボックスの「特別オファー」タイトルが表示されます。 その他のデータ（エージェント名とそのWebサイトURLとロゴ）は、アプリケーションコードに埋め込まれています。

PDFは、iframe（ExplorerまたはEdgeを除く）でプレビューするか、直接ダウンロードできます。

「更新プレビュー」または「ダウンロード」ボタンをクリックすると、PDFはJSPDFを使用して生成され、上記の例に示すように、データURI文字列としてIFRAMEに渡されるか、ディスクに保存されます。

PDF生成最初に次のオプションを使用して、新しいJSPDFオブジェクトインスタンスを作成します：ポートレートオリエンテーション（P）、ミリメートル単位（MM）、「A4」形式。

var pdf = new jsPDF();
pdf.text(30, 30, 'Hello world!');
pdf.save('hello_world.pdf');

Addimage関数を使用して画像を追加します。 PDFページに配置されたすべてのオブジェクトは正確に配置する必要があることに注意してください。宣言されたユニットを使用して、各オブジェクト座標を処理する必要があります。

var pdf = new jsPDF('p', 'mm', 'a4');

画像はbase64エンコードである必要があります：プロキシロゴはこの形式のスクリプトに埋め込まれ、ユーザーロードされた画像は$（ '＃flyer-image'）のreadasdataurlメソッドを使用してエンコードされます。リスナーを変更します。

タイトルは、テキストアリグイン関数を使用して追加されます。この関数はJSPDFコアの一部ではありませんが、著者が彼の例で示唆しているように、ライブラリはAPIを使用して簡単に拡張できることに注意してください。 Flyer Builderスクリプトの上部にTextAlign（）関数を見つけることができます。

この関数は、テキスト文字列のx座標を計算して中心にし、ネイティブテキスト（）メソッドを呼び出します。

// pdf.addImage(base64_source, image format, X, Y, width, height)
pdf.addImage(agency_logo.src, 'PNG', logo_sizes.centered_x, _y, logo_sizes.w, logo_sizes.h);

テキストのプロパティを変更するには、

、

pdf.textAlign(flyer_title, {align: "center"}, 0, _y);

、

、およびsetFontSize()メソッドを使用できます。 setFont() たとえば、setTextColor() 20ポイントの太字の赤い弦を設定するには、次のと入力する必要があります。 setFontType()

「特別オファー」グレーボックスとプライスサークル2つの同様の方法を使用します。どちらも左上隅の座標、サイズ値（最初のケースの幅と高さ、2番目のケースの半径）が必要です。

スタイルパラメーターとは、オブジェクトの塗りつぶしとストロークのプロパティを指します。有効なスタイルには、S [デフォルト]ストローク、パディング用F、パディングおよびストローク用のDF（またはFD）が含まれます。

pdf.text(text string, X, Y);

fillおよびstrokeのプロパティは、pdfドキュメント作成の開始時に宣言された単位のライン幅値を必要とするRGB値とroundedRect()を必要とするcircle()および

でプリセットする必要があります。

pdf.setFontSize(20);
pdf.setFont("times");
pdf.setFontType("bold");
pdf.setTextColor(255, 0, 0);
pdf.text(10,10, 'This is a 20pt Times Bold red string');

完全なコードはCodepenデモンストレーションにあります：

setFillColor（Codepenリンクはここに挿入する必要があります。外部Webサイトにアクセスできないため、提供できないため）setDrawColorsetLineWidth

結論

この基本的な例は、JSPDFを使用して非常に基本的なフライヤーを構築する方法を示しています。

使用は簡単かもしれませんが、完全なドキュメントがないため、各ステップが非常に複雑になります。

私はまだ他のソリューションを探しており、PDFMakeのような他のソリューションに焦点を当てています。しかし、最終的には、CSSルールを印刷するブラウザをより適切にサポートすることだと思います。

（FAQパーツをここに含める必要があります。コンテンツは元のテキストと同じですが、必要に応じて形式を調整できます）

以上がJSPDFでその場でWebページからPDFを生成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。