😀

【MUI DataGrid】CSVエクスポートの文字コードをUTF-8BOMにする

2022/06/22に公開

きっかけ

DataGridからエクスポートしたCSVファイルをExcelで開いてみたら文字化けしました。
IT関連に慣れていない人が開いたら「文字化けしてる!」ともなるし、盛りだくさんの機能がついてるMUIだし文字化け対応もできるだろうと思ったからです。

文字化けした時のコード

MUIのサンプルにCSVエクスポートを追加。

「EXPORT」ボタンを押すとCSVファイルがダウンロードできます。
Excelで開くと文字化けします。

文字化けした理由と対応

出力されたCSVファイルの文字コードが UTF-8 だったからです。
Excelで文字化けなく開くなら文字コードを UTF-8BOM で出力してあげれば解決します。
https://mui.com/x/api/data-grid/grid-csv-export-options/

UTF-8BOMで出力するコード

オプションとして
utf8WithBom = ture
を渡してあげればOK。

この状態からCSVをエクスポートするとExcelで開いても文字化けしません。

あとがき

最初にも書いた通りMUIであればできるだろうと思って調べた結果、MUI公式に書かれていました。
英語を読むのが大変でしたが、stackoverflowなどを使わずに自力で解決出来たことが嬉しくて初投稿の記事にしました。(多くの人が「公式ドキュメントを読め」と言っていることはまさにこういうことなのだろうなと実感しました。)
もし何かのお役に立てれば嬉しいです。ノシ

Discussion