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をつければよいというものでした。
自分の場合は、この方法で解決することができました。