Ext JS 開発者は Grid Component を、一式の機能が揃っているという点で愛用しています。最近のSencha主催のイベントでそれらをデモンストレーションしたところ、Ext JS PremiumにJacaScript Excel エクスポータプラグインが付属していることに多くの開発者が驚いていました ( Ext JS Kitchen Sink デモをご覧ください )。

開発者の方々は更に、GridのデータをどのようにPDFファイルの形式にエクスポートできるかを知りたがっていました。これによりGridデータを簡単に印刷できるからです。Ext JS はJavaScript PDFエクスポータプラグインを備えていませんが、サードパーティ製のライブラリをクライアントサイド、もしくはサーバーサイドで利用することで、Gridデータをエクスポートすることが可能になります。クライアントサイドでJavaScriptライブラリを利用する場合、そのコードはシンプルで、そのサンプルは以下(後述)に御用意しました。いずれの方法にも考慮すべきことや制限はありますので注意が必要です。GridのデータをエクスポートしてPDFファイルを作成することは、Excelフォーマットでファイルをエクスポートするよりはるかに複雑です。これは、紙にはサイズの制約があり、このために機能が制限されるからです。フォーマットや技術の考慮が結果として必要となります。

フォーマットについて考慮すべき点

まず国毎のデフォルトに従い正しいページサイズを見極める必要があります。例えば米国で最も一般的な用紙のサイズはLetter (8.5×11 インチ)ですが、英国ではA4 (8.27×11.69 インチ)です。

続いて、Gridが大量のカラムで構成されている場合、ページ幅の制限により見切れてしまわないことを確認する必要があります。Ext JS Grid では何百というカラムを作成することはできますが、それをエクスポートして用紙に合わせることはまた別の問題です。エクスポートのためにページの向きを横に回転してもう少し多く押しこむことはできるかもしれません。

三番目に、カラムサイズとそこに設定するデータを正しく定義する必要があります。これは1ページに収まるカラムの数に影響します。カラムサイズにautoやwildcardを使用する場合は注意が必要です。

四番目として、ヘッダやテーブルヘッダ、ページ数やロゴのフォントやカラースタイリングについて考慮しなければなりません。PDFはおそらく印刷されると考えられても、誰もがカラープリンタを使用しているとはいえません。

技術について考慮すべき点 -サーバーサイド処理するか、ブラウザで処理するか

アプリケーションに求められているデータセットのサイズやサポート対象のブラウザは、PDFの生成に利用する技術を選択する上で重要です。

データセットのサイズが大きい場合、ブラウザでPDFを作成するためにデータセット全てをクライアントに送ることは有効でありません。まず、サーバで使用されている言語はかなり処理が速いため、サーバーでPDFを作成する方がJavaScriptを使用しているブラウザよりもはるかに効率的です。次に、サーバはすでにデータセットを持っており、かつPDFを作成する機能を備えているにも関わらず、データセット全てをクライアントに送るのは効率良くありません。

Ext JS Storeに保持しているデータが少量である場合は、サードパーティ製のJavaScript PDFライブラリを利用することで、クライアントで容易にPDFを作ることができます。しかしもし、Infinite Scroll Grid などのコンポーネントでBufferedStoreを使用している場合、BufferedStoreは全体のデータセットの一部しか保持していないため、PDFはサーバサイドで作るべきです。

残念なことにほとんどのJacaScript PDF ライブラリはIE 11以下や、古いバージョンのSafariをサポートしていません。古いバージョンのIEやSafariはPDFを生成する上では問題ないのですが、そのファイルをディスクに保存する処理に問題があります。PDFファイルをディスクに保存する代わりに Downloadify のようなFlashプラグインを使ってファイルを保存したり、ブラウザで開くなどという回避方法はあります。

サーバーサイド技術の実装

.NETやJavaにはPDFを生成するライブラリはいくつもあります。それらの中には他のサーバサイドの言語に向けたものもあります。しかし全てのライブラリがテーブルの作成に対応しているわけではありません。表データのエクスポートに関する議論のため、テーブル作成機能を持ったPDF生成ライブラリのリストを以下に用意しました。当たり前ですがiTextのような商用ライブラリは、それらの替わりとなるオープンソースの製品より機能が充実しています。

JavaScriptのPDFライブラリを利用する大きなメリットのひとつは、既存のExt JS Grid エクスポートプラグインとの統合が非常に容易である点です。 Ext.grid.plugin.Exporter をサブクラス化し、getExporter関数とsaveDocumentAs関数をオーバライドするだけで、GridのデータをExcelファイルの代わりにPDFに保存することができます。New York Stock Exchange のリストに載っている株をGridに配置した サンプルアプリケーション を私は作りました。ユーザはGridのデータをPDFファイルにエクスポートすることができます。こちらには充実したテーブル作成機能を備えたpdfmakeライブラリを利用しました。 saveDocumentAs関数をオーバライドするコード は非常に短くシンプルです。動作するアプリケーションの デモはこちら でご覧いただけます。

Ext JS の短期ロードマップには、Gridデータをさらに他のファイル形式にエクスポートできるようにする予定があります(PDFに関しては上記のいずれか方法を続けていただくことになります)。ブログやリリースノートで最新情報をチェックしていただけますと幸いです。上記以外のPDF生成ライブラリを利用された場合、以下のコメント欄で共有をお願いいたします。