テキストファイルをダウンロードするとファイルが文字化けするのを解決した話

WordPressで運用してしているサイトに、テキストファイルをアップロードし、そのファイルへのリンクをクリックすると、文字化けしたテキストが表示されました。

aタグの設定でなんとかならないかと、Htmlを以下のように書き換えたところ、WindowsのChromeでの文字化けは解消したけれど、iPhoneだとやはり文字化けしてしまいます。

<a href="xxxxxxxx" download="●●.txt" charset="utf-8" hreflang="ja">ダウンロード</a>

これはヘッダー情報に原因があるに違いないということで、Chromeのディベロッパーツールで確認してみると、やはり charset=iso-8859-1 というヘッダー情報が見つかりました。なるほど、ダウンロードしたテキストファイルの文字コードがiso-8859-1だと認識されるので、文字化けするのも無理もない話です。

で、ヘッダーの「charset=iso-8859-1」はいったい誰がセットしているのかというと、おそらくhttpサーバに違いない。今案件のサーバはApacheが使われており、.htaccessファイルが使えるので、以下のように追記すれば解決できそうです。

<Files ~ "\.txt$">
AddType "text/plain; charset=utf-8" .txt
</Files>

つまり、拡張子が「.txt」のファイルの場合、強制的にキャラクターセットを「utf-8」とセットするようApacheに指示するわけです。

設定後、テキストファイルをダウンロードすると、めでたく文字化けが解消しました！

橋本 たかし

ホームページの制作（デザイン・コーディング・プログラミング）に加え、ネットショップの販売促進に関するアドバイスも致します。 20年以上に渡って実際にネットショップを運営した経験を生かし、聞きかじりではない実績を伴ったノウハウを、自分の言葉でお伝えいたします。 プログラミングの経験は30年以上。HTML、CSS、JavaScript、TypeScript、Vue、NuxtJS、Node.js、MySQL、MongoDB、Elasticsearch、WordPress、PHP、Docker、Electronなど、幅広く対応します。

bagooon.com