質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

UTF-8

UTF-8は8ビット符号単位の文字符号化形式及び文字符号化スキームです。データ交換方式、ファイル形式としては、一般的にUTF-8が使われる傾向があります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1151閲覧

JavaScript Csv出力 文字バケ

Yoshikun_0945

総合スコア224

CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

UTF-8

UTF-8は8ビット符号単位の文字符号化形式及び文字符号化スキームです。データ交換方式、ファイル形式としては、一般的にUTF-8が使われる傾向があります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/08/26 02:40

編集2019/08/26 02:49

###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蝨ィ鬮倩ィ育ョ礼・ィ・托シ仙・

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/08/26 02:46

CSVのデータ、画面表示、HTML など 他者がコピペで再現できる情報をご提示ください。
m.ts10806

2019/08/26 02:49 編集

UTF8で吐き出したCSVをExcelで開いてるならそりゃ文字化けするよ・・としか言いようがないですが、実際はどうなんでしょうか。
Yoshikun_0945

2019/08/26 02:50

メモ帳で開いたら解決しました。 ありがとうございました。
m.ts10806

2019/08/26 02:53 編集

ただutf8で出力したCSVが使えるかというと微妙ですけどね。 →訂正:要件が満たせるかどうか一考する必要がある
ikadzuchi

2019/09/08 13:59

BOM付きのUTF-8ならExcelでも開けるようですね。 もっとも世の中にはBOM付きのUTF-8を読めないソフトもあるのでどちらにすべきかは場合によります。
guest

回答1

0

自己解決

メモ帳で開いたら、文字化けしてませんでした。
知識不足でお騒がせしました。

投稿2019/08/26 02:51

Yoshikun_0945

総合スコア224

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問