Q&A
「文字化け内容↓」の画像は何ですか？ Excel? Shift_JIS でなくても読めるのですか？
もとの csv ファイルの文字コードは何なのですか？
前提・実現したいこと
HTML, CSS, javascriptを使い、
あるシステムを作成しています。
プラウザはchromeです。
CSV出力はできるのですが文字化けが出てしまいました。
私では力不足なので皆様にお力添えいただきたいです。
よろしくお願いします。
HTML
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="index.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> </head> <body> <div id="container"></div> <table align="center"> <tr><td>名前<br></td></tr> <tr><td><input type="text" name="name" id="name"><br></td></tr> <tr><td>email<br></td></tr> <tr><td><input type="text" name="email" id="email"><br></td></tr> <tr><td>出力先<br></td></tr> <tr><td><input type="text" name="messege" id="messege"><br><br></td></tr> <input type="button" id="download" value="CSV出力"> </table> </form> <script src="index.js"></script> </body> </html>
JS
function downloadCSV() { //ダウンロードするCSVファイル名を指定する const filename = "download.csv"; //CSVデータ const inputs = $('.input').map((_, element) => { return element.value; }).get().join(','); //BOMを付与する（Excelでの文字化け対策） const bom = new Uint8Array([0xef, 0xbb, 0xbf]); //Blobでデータを作成する const blob = new Blob([bom, inputs], { type: "text/csv" }); //IE10/11用 //download属性が機能しないためmsSaveBlobを使用する if (window.navigator.msSaveBlob) { window.navigator.msSaveBlob(blob, filename); //その他ブラウザ } else { //BlobからURLを作成する const url = (window.URL || window.webkitURL).createObjectURL(blob); //ダウンロード用にリンクを作成する const download = document.createElement("a"); //リンク先に上記で生成したURLを指定する download.href = url; //download属性にファイル名を指定する download.download = filename; //作成したリンクをクリックしてダウンロードを実行する download.click(); //createObjectURLで作成したURLを開放する (window.URL || window.webkitURL).revokeObjectURL(url); } } //ボタンを取得する const download = document.getElementById("download"); //ボタンがクリックされたら「downloadCSV」を実行する download.addEventListener("click", downloadCSV, false);
試したこと
文字化け対策用にBOMを付与しています。
補足情報（FW/ツールのバージョンなど）
chrome
Excel 2019
windows10
質問欄を編集したようですが、上の私の質問に答える気はナシですか？
Excelです。文字コードはUTF-8です。メモ帳で確認しましたが、何も表示されませんでした。
質問欄を編集して追加情報として追記願います。
> 文字化け対策用にBOMを付与しています。
元の CSV ファイルに BOM が付いていると言ってますか？ 実は付けたつもりがついてないとか？ BOM がついてないので、Excel は Shift_JIS と判断して文字化けしてるということはないですか？ もとの CSV ファイルを Excel で開いて見てください。ダウンロードしたファイルが途中で文字化けすることはないはずなので、元のファイルに問題があるような気がします。
> //IE10/11用
そもそも、質問の JavaScript コードは IE では動きません。
ありがとうございます。Excelは初期設定のままだったので確認してみます。
他の方の回答を見ると、jQuery のセレクタの使い方に問題があるようですが、文字化け云々の前に、そもそもダウンロードができてないとか？
> Excelです。文字コードはUTF-8です。メモ帳で確認しましたが、何も表示されませんでした。
質問欄を編集して追加情報として追記願います。ここは「質問への追記・修正」の場所ですので。
> SurferOnWwwさん
ダウンロードはできました。
私も知らなかったのですが、BOM3バイトのみのCSVファイルをエクセルで開くとこうなるようです。
Lhankor_Mhy さん>
> BOM3バイトのみのCSVファイルをエクセルで開くとこうなるようです。
なるほど、勉強になりました。レスをありがとうございました。
質問者さん>
質問のコードに「ダウンロード」と書いてあったので、サーバーにある CSV ファイルをダウンロードしていると勘違いしていました。質問のコードをよく見るとダウンロードなどではなくて、ブラウザ側でユーザー入力から CSV ファイルを作っているようですね。
> ブラウザ側でユーザー入力から CSV ファイルを作っているようですね。
はい、作っています。仕組みが理解できていないのもあり、ダウンロードって言葉が出たときにすぐにお答えできなく申し訳ないです。
回答2件
0
ベストアンサー
const inputs = $('.input').map((_, element) => {
「input」というクラス名がついた要素の値を取ろうとしていますので
HTML
1<input type="text" name="name" id="name"> 2↓↓↓ 3<input type="text" name="name" id="name" class="input">
のようにする必要があります
なおjQueryをほとんどつかっていないので生のjsで書いたほうがよいでしょう。
またES6なのでIE対策部分は不要だと思います
投稿2021/10/26 00:38
編集2021/10/26 00:40
総合スコア116724
0
typoです。
$('.input')→$('input')
投稿2021/10/26 00:36
総合スコア36960
それだとボタンにも反応して「CSV出力」という値も出力されてしまいますね
そうですね。会社の研修の課題のようですから、それぐらいのことは自分でやってもらいましょう。
ご回答ありがとうございます。基礎的なことから覚えていけるよう頑張っていこうと思います。
まずはDevToolsを使えるようになった方がいいと思います。
デバックとかですね。確かにそうですね。頑張ります。
あなたの回答
tips
プレビュー
