デモページダウンロードは必要ありません。cdnjs でホスティングされています。ただ、使い方がイマイチ解りにくいのが難点でした。GitHub の demo.js を読んで初めて使い方が解ります。 FileSaver.js は saveAs メソッドを提供します テキストデータをダウンロードするには、ブラウザが一般的に提供する Blob クラスを使う必要があります。そのインスタンスを saveAs メソッドに引き渡して目的が達成されます。( canvas を使って画像も保存できますが、話がややこしくなるのでここでは触れていません / ※ canvas-toBlob.js が必要です ) ソースコード
$(function() {
$("#getcsv").on( "click", function(){
var csv = "";
$("table").find("th").each(function( index ){
if ( index != 0 ) {
csv += ",";
}
csv += '"' + $(this).text() + '"';
});
csv += "\n";
var cnt = 0;
$("table").find("tr").each( function(){
// TH の最初の一行は処理しない )
if ( cnt > 0 ) {
$(this).find("td").each(function( col_cnt ){
if ( col_cnt != 0 ) {
csv += ",";
}
if ( col_cnt == 0 ) {
// Excel で文字列をそのまま取り込めるように( 例. 0001 を文字列として扱う )
csv += "=\"" + $(this).text() + "\"";
}
else {
csv += "\"" + $(this).text() + "\"";
}
});
csv += "\n";
}
cnt++;
} );
// UTF-8 の CSV を化けずに Excel で開く為
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
saveAs(
new Blob(
[bom,csv]
, {type: "text/csv;charset=" + document.characterSet}
)
, "syain.csv"
);
} );
});
Excel で正しく表示する為に ブラウザ上のデータは UTF-8 を想定しています。なのでそのまま単純に保存してしまうと、Excel が SHIFT_JIS を想定して読み込むので化けてしまいます。そこで、テキストの先頭に BOM をセットして、UTF-8 である事を Excel に知らせてやる必要があります。2014-11-29 バージョンでは、自分で BOM を設定する必要がありましたが、2016-06-16 バージョンでは内部に auto_bom という処理があり、XML か text のタイプで キャラクタセットが utf-8 の場合は自動で BOM を追加してくれます。 BOM が必要ない場合は、第三引数(ファイル名の次)に true を指定するといいようになっています。その他、"0001" という文字列をそのまま使えるように、="0001" という形で CSV のフィールドにセットしています。こうした状態で Excel に読み込むと、式の値が文字列であるようになります。Excel としてはかなり特殊な扱いのデータになりますが、Excel として保存してからあらためて .CSV として保存するとフィールドの値は単純な 0001 となります。 Uint8Array 関連する記事 FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
|
|
【JavaScript ライブラリの最新記事】
- clipboard.js を使用してテキストをコピーする際に clipboard.js が必要とするパーツと意味
- clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。
- JavaScript の内部コード文字列を SHIFT_JIS としてダウンロードさせる方法
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その2 / ソースをクリップボード..
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その1 / ソースの表示 )
- JavaScript のみで、SHIFT_JIS や EUC-JP を UrlEncode に近い Escapeする Escape Codec Library
- JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項
- Lightbox2 ライブラリの今時の使い方
- Google Visualization API って apikey いらなくなった? / ライブラリロード方法が変わってました
- Lightbox2 で data-title にボタンを埋め込んで、クリックしたら 画像のファイル名を取り出して Lightbox2 を閉じるギャラリーのデモ
- EASELJS を使用した画像の分割と分割されたエリア毎のアニメーション / createjs.Ticker の reset と init はうまく動きませんでした
- EASELJS を使用した画像の縮小とトリミングと角丸マスク / 画像は new Image でイベント処理して画像サイズを取得します
- Three.js r73 での Canvas で平面を飛翔させる為の詳細デモ
- クリスマスに備えて、『雪を降らす snowstorm.js』のカスタマイズ / ダウンロードも何も必要ありません。jQuery も必要ありません
- JavaScript : 誰でもすぐ使える Google 円グラフ(2) : データを Google ドキュメントから取得する
- JavaScript : 誰でもすぐ使える Google 円グラフ
- カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。
- google.load で Yahoo UI のメニューを使う
