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

やること

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

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

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

結果

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

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

概要

data:のURL

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

blob:のURL

  1. aタグのクリック時にonEmbeddedFileDownload関数を呼び出す
  2. aタグのhref属性をJavaScriptで作成する
  3. 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');" data-file="44GV44KT44G344KL44Gn44O844Gf">ダウンロード(blob:のURL)</a>

<script>
// 埋め込みファイルダウンロード
function onEmbeddedFileDownload(a, filename, type) {
  type = type || "text/plain";

  // データ作成(例:tableをCSVに変換するなど)
  var bom = new Uint8Array([/*0xEF, 0xBB, 0xBF*/]);     // UTF-8BOMなし
  var data = a.dataset.file;                            // UTF-8NのBASE64形式データ
  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で「~~~は、一般的なダウンロードされているファイルではなく、危害を及ぼす可能性があります。」の警告文がでることがあるようです。(ファイルサイズやサイトの信頼性によっては表示されるようです)

 <a download="test.zip" href="data:application/zip;base64,...">test.zip</a>

コメント: 0

コメントを書く