HTMLにテキストファイルを埋め込んでダウンロードする

2019/04/032020/12/16

やること

ブログなどのファイルが置けないない環境で、小規模なテキストファイルを外部ホスティングせずに、ダウンロード可能にする。

HTMLファイル内にファイルを埋め込む
リンクのクリックでダウンロードする

追記
data:で画像ファイルの埋め込みなどと同じように埋め込めるようです。
JavaScriptは、いらんかった(´・ω・｀)

結果

下記のリンクをクリックすることで、データ内容が「さんぷるでーた」のテキストファイルをダウンロードすることができます。

ダウンロード(data:のURL)
ダウンロード(blob:のURL)

概要

data:のURL

aタグのhref属性にdata:形式で埋め込む
- data:<MIMEタイプ>;base64,<BASE64データ>
aタグのdownload属性でダウンロードする

blob:のURL

aタグのクリック時にonEmbeddedFileDownload関数を呼び出す
aタグのhref属性をJavaScriptで作成する
aタグのdownload属性でダウンロードする

ソースコード

ファイル埋め込み<a download="sample.txt" href="data:text/plain;charset=UTF-8;base64,44GV44KT44G344KL44Gn44O844Gf">ダウンロード(data:のURL)</a>
<a href="#" onclick="onEmbeddedFileDownload(this, 'sample.txt', '44GV44KT44G344KL44Gn44O844Gf');">ダウンロード(blob:のURL)</a>

<script>
// 埋め込みファイルダウンロード
function onEmbeddedFileDownload(a, filename, data, opt_type, opt_bom) {
  var type = opt_type || "text/plain";
  var bom  = new Uint8Array(opt_bom || []);                     // UTF-8BOMなし
  //var bom  = new Uint8Array(opt_bom || [0xEF, 0xBB, 0xBF]);     // UTF-8BOMあり

  // データ作成
  var text = decodeURIComponent(escape(atob(data)));
  var blob = new Blob([bom, text], {"type": type});

  // 保存
  if (window.navigator.msSaveBlob) {
    // IE用(保存 or 開く保存)
    window.navigator.msSaveBlob(blob, filename); 
    //window.navigator.msSaveOrOpenBlob(blob, filename);
  } else {
    a.download = filename;
    a.href = window.URL.createObjectURL(blob);
  }
}
</script>

補足

BASE64化には、Webサービス等を利用してください。

※BOM/文字コード/改行コードに注意する。
※サーバ側で処理するタイプは、UnicodeのBOMに更に注意する。
※埋め込むBASE64の改行文字は削除する。

圧縮する

テキストファイルを圧縮してからBASE64に変換して埋め込むこともできます。テキストファイルであるため、圧縮することで容量が大きく削減できます。改行や文字コードを意識する必要がなくなります。複数のファイルを一括でダウンロードさせることもできます。

ただし、Chromeで「～～～は、一般的なダウンロードされているファイルではなく、危害を及ぼす可能性があります。」の警告文がでることがあるようです。（ファイルサイズやサイトの信頼性によっては表示されるようです）

sample.zip

<a download="sample.zip" href="data:application/zip;base64,UEsDBAoAAAAAAJ1ykFHpFmidFQAAABUAAAAKAAAAc2FtcGxlLnR4dOOBleOCk+OBt+OCi+OBp+ODvOOBn1BLAQIXCwoAAAAAAJ1ykFHpFmidFQAAABUAAAAKAAAAAAAAAAAAIAC2gQAAAABzYW1wbGUudHh0UEsFBgAAAAABAAEAOAAAAD0AAAAAAA==">sample.zip</a>

※極小のファイルは、圧縮によりファイルサイズが増加することがあります。