###csvファイルの文字化けの解消
下記コードを利用して、HTMLにあるTableをJavaScriptにてCsv出力を実施してみたところ、Csvファイルにて文字化けが発生してしまいました。
文字化けが発生したのは、平仮名、漢字等の日本語のデータがあるセルだけで、英数のセルは文字化けしていませんでした。
どのように修正すればよろしいでしょうか?
HTMLの文字コードはUTF-8を使用しています。
GoogleChromeで実行してみました。
var tableToCSV = { export: function(elm /*, delimiter */) { var table = elm; var rows = this.getRows(table); var lines = []; var delimiter = delimiter || ','; for (var i = 0, numOfRows = rows.length; i < numOfRows; i++) { var cols = this.getCols(rows[i]); var line = []; for (var j = 0, numOfCols = cols.length; j < numOfCols; j++) { var text = cols[j].textContent || cols[j].innerText; text = '"'+text.replace(/"/g, '""')+'"'; line.push(text); } lines.push(line.join(delimiter)); } this.saveAsFile(lines.join("\r\n")); }, saveAsFile: function(csv) { var blob = new Blob([csv], {type: 'text/csv'}); var url = URL.createObjectURL(blob); var a = document.createElement("a"); a.href = url; a.target = '_blank'; a.download = 'table.csv'; a.click(); }, getRows: function(elm){ return Util.getNodesByName(elm, 'tr'); }, getCols: function(elm){ return Util.getNodesByName(elm, ['td', 'th']); } } var Util = { getNodesByName: function(elm /*, string or array*/) { var children = elm.childNodes; var nodeNames = ('string' === typeof arguments[1]) ? [arguments[1]] : arguments[1] ; nodeNames = nodeNames.map(function(str){ return str.toLowerCase() }); var results = []; for (var i = 0, max = children.length; i < max; i++ ) { if (nodeNames.indexOf(children[i].nodeName.toLowerCase()) !== -1) { results.push(children[i]); } else { results = results.concat(this.getNodesByName(children[i], nodeNames)); } } return results; } } window.onload = function(){ document.getElementById('download').addEventListener('click', function (e){ e.preventDefault(); tableToCSV.export(document.getElementById('tbl')); }); } </script>
<!DOCTYPE html> <html lang = "ja"> <!--画面の設定--> <head> <!--文字バケ防止のため、文字コードを設定する--> <meta charset="UTF-8"> <!--外部cssファイルを読み込む--> <link rel="stylesheet" href="STYLE.css"> <!--タブバーに表示する文字の設定--> <title>用度品検索</title> <script> var tableToCSV = { export: function(elm /*, delimiter */) { var table = elm; var rows = this.getRows(table); var lines = []; var delimiter = delimiter || ','; for (var i = 0, numOfRows = rows.length; i < numOfRows; i++) { var cols = this.getCols(rows[i]); var line = []; for (var j = 0, numOfCols = cols.length; j < numOfCols; j++) { var text = cols[j].textContent || cols[j].innerText; text = '"'+text.replace(/"/g, '""')+'"'; line.push(text); } lines.push(line.join(delimiter)); } this.saveAsFile(lines.join("\r\n")); }, saveAsFile: function(csv) { var blob = new Blob([csv], {type: 'text/csv'}); var url = URL.createObjectURL(blob); var a = document.createElement("a"); a.href = url; a.target = '_blank'; a.download = '発注.csv'; a.click(); }, getRows: function(elm){ return Util.getNodesByName(elm, 'tr'); }, getCols: function(elm){ return Util.getNodesByName(elm, ['td', 'th']); } } var Util = { getNodesByName: function(elm /*, string or array*/) { var children = elm.childNodes; var nodeNames = ('string' === typeof arguments[1]) ? [arguments[1]] : arguments[1] ; nodeNames = nodeNames.map(function(str){ return str.toLowerCase() }); var results = []; for (var i = 0, max = children.length; i < max; i++ ) { if (nodeNames.indexOf(children[i].nodeName.toLowerCase()) !== -1) { results.push(children[i]); } else { results = results.concat(this.getNodesByName(children[i], nodeNames)); } } return results; } } window.onload = function(){ document.getElementById('download').addEventListener('click', function (e){ e.preventDefault(); tableToCSV.export(document.getElementById('ZaikoData')); }); } </script> <!--タブバーの設定を終了する--> </head> <!--以下 本文--> <body> <table class = "zaiko"> <tr><th>ID</th><td></td></tr> <tr><th>名称</th><td></td></tr> </table> <!--以下在庫表示兼発注表--> <table class = "zaiko" id = "ZaikoData"> <tr><th>ID</th><th>名称</th><th>数量</th><th>入力</th><th>上限</th></tr> <tr><td>K900000</td><td>ノート</td><td>10冊</td><td></td><td></td></tr> </table> <a href="#" id="download">発注登録</a> </body> </html>
HTMLのTableデータ
|ID|名称|数量|入力|上限|
|:--:|:--:|:--:|:--:|
|K900000|ノート|10冊|||
Csvファイルの状態
蜩∫岼繧ウ繝シ繝・,逕ィ蠎ヲ蜩∝錐" | 蝨ィ蠎ォ | 逋コ豕ィ驥・,荳企剞" |
---|---|---|
K900000 | 蝨ィ鬮倩ィ育ョ礼・ィ | ・托シ仙・ |
回答1件
あなたの回答
tips
プレビュー