php+ajaxでCSVをダウンロードした場合の文字化け対処法

2021年08月08日

以下の問題を解決するのに苦労したので、備忘録として書いておきます。

発生した問題

phpでそのままCSVを生成して出力した場合は問題なく出力できる

ajaxを使って、生成したCSVをダウンロードすると、エクセルで開いた場合に文字化け

出力されたCSVファイルを、テキストエディタで開くと、ファイルの文字コードがUTF-8になっている？（普通にPHPで出力した場合はsjis)

前提の環境

サーバ側で出力しているCSVはPHPで生成し、文字コードはsjis

ブラウザはIE11

今回やろうとしていたのは、PHPでそのまま出力するのではなく、ajaxでダウンロードするパターンだったので、文字化けの対処法を探すのに苦労しました。

以下の記事のおかげで解決できました。

JavaScript 文字化けしないファイルの出力法 | グルーヴであなたのビジネスは加速する

サンプルコード(上記のサイトからそのまま抜粋)

ar csv = 'ここにCSVのデータを入れる';

var link = document.createElement('a');
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var blob;

if (window.navigator.msSaveOrOpenBlob) {
  // for ie
  blob = new Blob([bom, csv], {type: 'text/csv'});
  window.navigator.msSaveOrOpenBlob(blob, csvName);
} else if (window.webkitURL && window.webkitURL.createObjectURL) {
  // for chrome (and safari)
  blob = new Blob([bom, csv], {type: 'text/csv'});
  link.setAttribute('download', csvName);
  link.setAttribute('href', window.webkitURL.createObjectURL(blob));
  link.click();
} else if (window.URL && window.URL.createObjectURL) {
  // for firefox
  blob = new Blob([bom, csv], {type: 'text/csv'});
  link.setAttribute('download', csvName);
  link.setAttribute('href', window.URL.createObjectURL(blob));
  link.click();
}

やっていたこととしては上記と同じで、ajaxで取得したCSVデータをwindow.navigator.msSaveOrOpenBlobで開くというものだったのですが、new Blobで開くblobデータを作成する場合に、テキストの先頭にBOMをつければよいというものでした。

自分の場合は、この方法で解決することができました。