HOME > 開発者向けBLOG > Sencha Blog >  Ext JS Grid からPDFへデータをエクスポートする

Technology Note 開発者向けBLOG

Sencha Blog

Ext JS Grid からPDFへデータをエクスポートする

こんにちは、ゼノフィseoです。

この記事は、US Sencha社ブログExporting Data from an Ext JS Grid to PDF(2016年5月12日|Shikhir Singh)を翻訳したものです

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のような商用ライブラリは、それらの替わりとなるオープンソースの製品より機能が充実しています。

Name
License
Languages Officially Supported
Creators

iText

AGPL and Commercial .NET & Java iText

PDF Clown

LGPL .NET & Java PdfClown.org

PDFJet

BSD and Commercial .NET & Java Innovatics Inc.

Boxable (PDFBox)

Apache 2 Java Open Source / GitHub

FPDF

Permissive PHP Open Source / FPDF.org

JavaScriptクライアントサイド技術の実装

残念ながらJavaScriptを使ってPDFを生成する選択肢はかなり少ないです。代表的な4つのライブラリを以下に示します。
Name
License
Creator

PDF.js

Apache

Mozilla

jsPDF

MIT Parallax

pdfmake

MIT Open Source / GitHub

PDFKit

MIT Open Source / GitHub

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生成ライブラリを利用された場合、以下のコメント欄で共有をお願いいたします。

PAGETOP