yasutomogのブログ

JavaScriptとAzureとPHPのメモ帳

AjaxのCSVダウンロード(Excelでの文字化け対応)

概要

  • 既に色々なところであがっているトピックなので今更だが、Excelの特定バージョンでのみ文字化けするということがあったので、対策をメモ
  • 一般的にCSVExcelで開く時の文字化け対策としては以下2つ。
  • 今回はUTF-8(BOM付き)で対応していたところ、以下のExcelバージョンでのみ日本語が文字化け(同じ2007でも違うバージョンだと問題なく表示できていた、、)
    • Excel 2007(12.0.4518.1014)
  • ダウンロード処理のざっくりとした流れは以下。
    • ajaxでPOST通信
    • サーバ側からファイル内容を返す
    • JavaScriptでBlobを使いファイルとそのリンクを作成
    • aタグを作ってリンクを紐づけ、clickイベント実行

対応

  • JavaScriptShift_JISに変換してファイルを作成するように変更することで、文字化けしていたExcelでも正しく表示できました。
  • ファイル内容の文字コードを変更するために、encoding.js(1.0.29)を追加しました。

    github.com

// ダウンロード用Ajax通信のコールバック(サンプルコード)

let rt = response.responseText,
  strRt = Encoding.stringToCode(rt),
  arrRt = Encoding.convert(strRt, "SJIS", "UNICODE"),
  u8a = new Uint8Array(arrRt),
  blob = new Blob([u8a], { 'type' : 'text/csv;charset=sjis;' }),
  blobUrl = window.URL.createObjectURL(blob),
  a = document.createElement('a');

a.href = blobUrl;
a.download = 'hoge.csv';
a.click();