Excel2 canvas

Excel2Canvas

2013/04/04株式会社 FLECT

小西俊司

Excel シートを Web ブラウザ上に描画するライブラリ◦ https://github.com/shunjikonishi/excel2canvas

罫線や背景色は HTML5 の Canvas 上に描画◦ なので IE8 以前の古いブラウザでは動きません◦ 動作確認は一応 Chrome, Firefox, IE9, Safari, iOS,

Android でしてます。特に何か目的を持って作ったものではな

く、 Canvas の調査時になんとなく思いつきで試してみたのが始まり◦ 絵心があったら多分こんなものは作ってない。。。

Excel2Canvas とは

https://github.com/shunjikonishi/excel2canvas

ネットで拾ったものを少し加工したサンプル( 記憶が確かなら一番最初のテストデータ )

思った以上に Excel で作ったレイアウトを再現できてる

ちなみに印刷もこのままでます

さりげなく画像 ( 左上のロゴ ) とリンクもサポート

請求書のサンプル

グラフも部分的にサポート

棒グラフや円グラフなどの単純なグラフのみ

細かいプロパティ設定は全部無視するので見た目は Excel と同じにはならない

グラフの描画に使用しているライブラリは Flotr2

グラフもいけたり

まず Java 側で◦ Apache POI で Excel ファイルの情報を読み取り◦ それを JSON 化

次に JavaScript で◦ キャンバスに罫線と背景を描画して◦ 文字列はセル毎に div タグで絶対位置に配置◦ その上に画像とグラフを重ねて完成

とても泥臭い

どういうアーキテクチャ？

ExcelToCanvasBuilder を作って Excel ファイルを渡してやれば OK

使い方 - JavaExcelToCanvasBuilder builder = new ExcelToCanvasBuilder(); builder.setIncludeComment(true);// コメント情報を含める builder.setIncludeChart(true);// グラフ情報を含めるbuilder.setIncludePicture(true);// 画像情報を含めるString json = builder.build(new File("Book1.xlsx"), "Sheet1").toJson();

jQuery プラグインになっているので Canvas を保持するdiv タグで excelToCanvas メソッドを呼び出せば OK

使い方 - JavaScript<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“ ></script>

<link rel="stylesheet" type="text/css" media="screen,print" href="jquery.excel2canvas.css" /><script type="text/javascript" language="javascript" src="flotr2.js"></script><script type="text/javascript" language="javascript" src="jquery.excel2canvas.min.js"></script><script type="text/javascript" language="javascript" src="jquery.excel2chart.flotr2.min.js"></script>

<script>$(function() { var data = ${excel.raw()};// さっきの JSON データを埋め込む $("#canvasHolder").excelToCanvas(data).css("width", $("#canvas").width());});</script>

... <div id="canvasHolder"> <canvas id="canvas"></canvas></div>

現状どれだけのことができるのか？◦ 次ページ以降覚えてる範囲で実装内容を解説◦ 言うまでもないが作ってないものは描画されない

この先どうなっていくのか？◦ ぶっちゃけ未定◦ ていうか最初に作ってから半年以上眠らせてたし。。。◦ Heroku の Addon にする話が実現すれば状況は変わる

かな？

ライブラリの明日はどっちだ？

必要なものから作る◦ できることはわかっているが自分が使ってないので実装して

いないものは結構あるできそうなことはやる

◦ 需要があって実装が可能なものはできるだけやりたいと思わないこともない

Excel のすべての機能を網羅することを目標としない◦ 存在すら知らない機能が山ほどあるに違いない◦ オブジェクトなどいかんともしがたいものはあきらめが肝

心◦ ていうか多分想像できると思うけど本気でめんどくさい。。。

(--

開発方針

罫線のスタイルは POIで取得できている

スクリプト側で厳密に描画しているのは以下◦ 実線◦二重線◦破線

異なる長さのダッシュ線は単純な実線として描画◦ スクリプトの修正だけ

でできるわけだが。。。

罫線

背景色、パターンの色、パターンの種類、すべて POI で取得できている

しかし、スクリプト側では単純に背景色で塗りつぶしているだけでパターンは無視している

これもスクリプトの修正だけでできるけど、全部はやりたくない

塗りつぶし

横位置は左詰め、右詰め、中央揃えに対応◦均等割り付けは CSS で「 text-align:jusify」を指定しているが

あんまり綺麗に表示されない縦位置は上詰め、下詰め、中央揃えに対応リッチストリング ( 単一セル内で文字の色や大きさを変

える ) には未対応セル全体のリンクには対応折り返して全体を表示、縮小して全体を表示には未対応

◦原則セルからはみ出す文字列は非表示◦ ただし、左詰めで隣のセルが空いている場合はセルをはみ出し

て文字列を表示セルの結合には対応

文字列

Windows OS上のブラウザではOSにフォントがあればそれが使用される MacはOSにあるフォントセットが全く違う上に font-familyの日本語が不可なのでなんらかの変換が必要◦ とりあえずフォント名に「明朝」とか「ゴシック」とかがある場合は「serif」や「san-serif」を追加している◦ フォントがない場合はデフォルトのフォントで表示される

iOSとAndroidでは明朝フォントがそもそもない？のかほぼ常にゴシックで表示される。

フォント

POI の書式設定解釈は日本語 ( 特に日付関連 ) がメタメタなので自力でなんとかした

多分ほとんどの書式は正確にでるはず◦ 少なくとも日本語書式は◦英語書式は多分大丈夫だけど他の言語？に関してはデグレードしているかもしれない

ただし先頭が「＊」で始まる書式は OS の情報を使用しているのでサポートできない

書式設定

コメント Bootstrap の

tooltip で実装このためだけに

Bootstrap をinclude するのはイマイチなので実装変えるかも

Bootstrap がない場合はコメントは無視され、描画されない

なんとBASE64にして JSONの中に突っ込んでいるちなみに描画は

◦ <img src=“data:image/jpeg;base64,… “/> あまり大きな画像を貼り付けてはいけない回転等には対応していない (CSS3ではできそうだけど。。。 )

画像

JavaScript のグラフライブラリとしては Flotr2 を使用し以下に対応◦ 円グラフ◦ 棒グラフ◦ 折れ線グラフ◦ レーダーチャート

細かいプロパティ設定等は考慮していない◦ ので、見た目は Excel 上で見た場合とは大分異なる

ちなみにグラフ情報は POI では取得できないので OOXML直読み。。。(--

単純なグラフでかつ Flotr2 が対応しているもの (例えばバブルグラフとか ) は今後サポートする可能性はあるが組み合わせグラフなどにはおそらく対応しない。

JavaScript ライブラリは別のものに差し替えることができる設計になっているが多分対応されることはない◦ 最近は良さげなグラフライブラリがたくさんありすぎて何を使うのが良いんだかよくわからない。。。

グラフ

テストはほぼ xlsx のみで xls はほとんど試していない◦ だいたいは正しく出力されると思うがグラフや画像は無視されるはず◦ Xls は POI のバグもあったような。。。

テーマを使用している場合の色が正しく取れない◦ これはやり方がわからず色々なサイトを見て試行錯誤したあげくあきらめた。

(--◦ ある程度近い色になる場合もあればまったく異なる色になることもあってよ

くわからない。。。 Excel はデフォルトフォントによってセル幅の計算方法が変わる

◦ これはセル幅を「デフォルトフォントで何文字分」という持ち方をしているため。 ( なんで？？？ )

◦ 「MS P ゴシック (日本語版 )」と「Arial( 多分英語版のデフォルト )」には対応したけど、それ以外のデフォルトフォントではセル幅が狂うと思われる。

クリップアート、その他の実装予定はない

その他

面倒なだけで特に難しいことはしていないやろうと思えばできることはまだたくさんあるが。。。

◦ ただただめんどくさい◦マイナーな機能は使っている人が本当にいるのか謎（ Excel職人は

いると思うけど）◦ ほとんど使われることのない機能のためにスクリプトが肥大化する

のは避けたいなどの理由でもはや自分では優先順位がつけられない (-- 実際のところサポートしている機能は Excel 機能のごく一

部でしかないが世の中のほとんどの人はその一部の機能しか使っていないような気がする◦今のままでもかなり使えるはず◦後は必要に応じてかな。。。 (^^;;;

まとめ

Excel2 canvas

Documents

Transcript of Excel2 canvas