概要

macでは問題なかったが、windowsでcsvダウンロードしたら文字化けしてしまった時の対処法
windowsの機体がなくても簡単に文字化けが直ったか確認する方法
について記載します。

文字化けの発生原因

WindowsのExcelでCSVファイルを開くと、Shift_JISで読み込まれてしまうためUTF-8のファイルで書かれたファイルは文字を解釈できずに文字化けする

具体的な対応方法

以下のようにBOMを付けることで、ExcelにUTF-8で書かれていることを伝えることができます。

downloadCsv() {
      const text =
        "ここにフォーマットのテキストが入ります"
      const bom = new Uint8Array([0xef, 0xbb, 0xbf]) //ここでUTF-8を指定
      const blob = new Blob([bom, text], { type: "text/csv" })
      const url = URL.createObjectURL(blob)
      const link = document.createElement("a")
      link.href = url
      link.setAttribute("download", `format.csv`)
      document.body.appendChild(link)
      link.click()
      link.remove()
    },

本当に文字化けがなくなったかの確認方法（macでもできる）

修正をしたら確認しないといけないですが、手元にwindowsの機体がないという方へ。
次のコマンドを実行すればmacでも文字コードがきちんと指定できているか確認することができます。

od -tx1 -Ax XXXXXXXX.csv

これで先頭の行（0000000）にef bb bfの文字が入っていればOKです

参考画像

きちんと指定できていればこんな感じになります。

1点注意事項として、ファイル名に（1）、（2）とか同じファイル名で保存した時に勝手につけられる括弧付きの数字が入っていたらこのコマンドは失敗しました。

ダメな例：text(1).csv
OKな例：text1.csv

参考記事

BOMやBlobって何？
さっきのコマンドの意味は？
という方はこちらの参考記事に詳しく書いてありましたので、ぜひご覧ください！

BOMやBlobを理解してJavaScriptでCSVを出力する
[Rails]CSVダウンロード機能を細部まで理解して実装する（２）Windows対応BOM付きUTF-8