Tabulator で表示した表から、BOM付きのCSVダウンロードするには、
2通りの方法がある。
・Custom File Formatter を使う方法
・Format Data Before Download を定義する方法
いずれも、対策するためにカスタマイズする方法を示したマニュアルが
http://tabulator.info/docs/#download ページに書いてある。
(1)Custom File Formatter を使う方法
先頭に BOM を付けるCSV作成のフォーマット関数を用意する。
var csvFormatter = function(columns, data, options, setFileContents){ var self = this, titles = [], fields = [], delimiter = options && options.delimiter ? options.delimiter : ",", fileContents; columns.forEach(function(column){ if (column.field){ titles.push('"' + String(column.title).split('"').join('""') + '"'); fields.push(column.field); } }); fileContents = ["\uFEFF" + titles.join(delimiter)]; data.forEach(function(row){ var rowData = []; fields.forEach(function(field){ var value = self.getFieldValue(field, row); switch(typeof value === 'undefined' ? 'undefined' : _typeof(value)){ case "object": value = JSON.stringify(value); break; case "undefined": case "null": value = ""; break; default: value = value; } rowData.push('"' + String(value).split('"').join('""') + '"'); }); fileContents.push(rowData.join(delimiter)); }); setFileContents(fileContents.join("\n"), "text/csv") }
ダウンロード実行するイベントで、2番目のパラメータダウンロードするファイルの種別の代わりに
用意した function を指定する
$("#example-table").tabulator("download", csvFormatter, "data.csv");
(2)Format Data Before Download を定義する方法
tabulator メソッドでテーブル定義と一緒に、downloadReady を定義する
$("#example-table").tabulator({ layout: "fitColumns", columnVertAlign: "bottom", columns:[ // 列定義、、、この説明では省略 ], downloadReady:function(fileContents, blob){ return new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]) , fileContents], {type:'text/csv'}); } });
ダウンロード実行するイベントは、標準のマニュアルどおり。
$("#example-table").tabulator("download", "csv", "data.csv");
同様のことを Handsontable だと、どうなんだろう?と調べると
有償版 Pro なら、オプション指定があり、これは default BOM true になってる。
Handsontable - Tutorial: Export to file