わんすけに聞いてみる EXCELっぽいHTMLテーブル テーブルのダウンロード(SheetJS – xlsx.full.min.js)

テーブルのダウンロード(SheetJS – xlsx.full.min.js)

前回の続き。
「ExcelっぽいHTMLテーブル」をダウンロードできるようにしてみる。

引き続き、こちらの記事のサンプルコードをマネっこして導入してみる。
HTMLのTableをExcelに出力するJavaScript

で、SheetJSっていうところからxlsx.full.min.jsを参照に追加すると。

そしたら、XLSXにDOMを解析してExcelに変換できるオブジェクトがロードされるそうな。

参照忘れで機能実装の防止に機能使う前にXLSXオブジェクトのチェックを入れとこ。

ほんで、XLSXオブジェクトと前回観察したsaveAs関数がある時だけボタンできるようにしよう。

なんとなくCSSはこんな感じで、(色のセンスがないのはあとで考えよ。)

オプションとして、参照ライブラリがある時だけボタン表示させたいから

参照ライブラリがあったらスクリプトでmargin-topでスペース作っといて

テーブルの一行目の項目からテーブル上にはみ出させる感じでボタンを作ってみる。

Excel書き出しの部分は参考にさせて頂いた記事からほぼパクリで乗せる。

おっ、おおおぉぉぉ~~~ダウンロードできた。

 

でも、ファイル開いてみたら今回のソースでむりくり突っ込んだダウンロードボタンとか非表示でブッコンでるセルアドレスとかがデータに入っちゃってるな。

「ExcelっぽいHTMLテーブル」は関数使えるようにする予定だから、ダウンロード前にセルのデータを式に書き換えてセルアドレスとか余分なデータも消してからダウンロードさせて、終わったら表示を戻すみたいな処理が必要そーですね。

んんん、でもセルアドレスとセルデータは別の連想配列でもってるからな。。。

あるテーブルをゴリゴリ書き換えるより別枠に非表示の出力用テーブル生成してダウンロードしたら消す方が建設的かな?

んんん、それはまた次回考えましょ。今日はここまでっつーことで。

わんすけへ寄付金を送る

このサイトの情報が何かの為になったなーって思う方がいらっしゃれば、是非「わんすけに缶コーヒー1本でもご馳走する」気持ちでポチってあげて下さい😉

¥120

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Related Post

編集したTableの値に循環参照が発生していないかチェックしてみる。編集したTableの値に循環参照が発生していないかチェックしてみる。

さて、今回は編集可能にしたTableに関数を実装していく前に循環参照を検出しようというところ。 編集中のセルからフォーカスアウトした時に発火するイベントにチェックを仕込みます。 循環参照のチェックを開始する部分 [cra […]

Tableのセルにエクセルっぽいアドレスを振って矢印キー移動してみる。Tableのセルにエクセルっぽいアドレスを振って矢印キー移動してみる。

前回の続きから、選択中のセルを矢印キーで移動しようと思ったら セルの相対位置がわかるアドレスがないといけないなーと思いまして まさにエクセルの様なセルアドレスを振ってみようじゃないかと考えました。   &nbs […]