ホーム > カテゴリ > HTML5・JavaScript >

JavaScriptでファイルを作成してダウンロードする

PHPなどのサーバーサイドでファイルの作成処理を行わず、クライアントのJavaScriptだけでファイルを作成してそのファイルをダウンロードする方法をご紹介します。

以前のJavaScriptでは不可能でしたが、HTML5の登場によりJavaScriptでも可能となりました。

ファイルの作成

次のボタンを押すとJavaScriptでファイルを作成して、そのファイルをダウンロードする事が出来ます。

サンプルコード

JavaScriptでファイルを作成してダウンロードするサンプルコードです。

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<body>
<script type="text/javascript">

function AsciiToUint8Array(S) {
  var len = S.length;
  var P = new Uint8Array(len);
  for (var i = 0; i < len; i++) {
    P[i] = S[i].charCodeAt(0);
  }
  return P;
}
    
function SaveToFile(FileName,Stream) {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(new Blob([Stream.subarray(0, Stream.length)], { type: "text/plain" }), FileName);
  } else {
    var a = document.createElement("a");
    a.href = URL.createObjectURL(new Blob([Stream.subarray(0, Stream.length)], { type: "text/plain" }));
    //a.target   = '_blank';
    a.download = FileName;
    document.body.appendChild(a) //  FireFox specification
    a.click();
    document.body.removeChild(a) //  FireFox specification
  }
}

function run(){    
  var Stream = new Uint8Array(AsciiToUint8Array('http://www.petitmonte.com/'));
  SaveToFile('test.txt',Stream);
}
</script>
</head>
<button onclick="run();">ファイルの作成</button>
</body>
</html>

31行目のUint8Array型のコンストラクタとAsciiToUint8Array()でファイルのバイナリデータを作成します。

32行目のSaveToFile()でファイルをダウンロードします。

AsciiToUint8Array()関数はアスキー文字をUint8Arrayに変換しています。※英数字と記号のみ対応です。

SaveToFile()関数はブラウザがIE、Edgeの場合とそれ以外(Chrome、FireFoxなど)の場合でダウンロード手法が異なります。

動作確認

Edge、IE11、Chrome、FireFoxの最新版で確認しています。

日本語対応版 - 2016/5/23追記

日本語に対応するにはコードを次のように変更します。

function SaveToFile(FileName,Stream) {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(new Blob([Stream], { type: "text/plain" }), FileName);
  } else {
    var a = document.createElement("a");
    a.href = URL.createObjectURL(new Blob([Stream], { type: "text/plain" }));
    //a.target   = '_blank';
    a.download = FileName;
    document.body.appendChild(a) //  FireFox specification
    a.click();
    document.body.removeChild(a) //  FireFox specification
  }
}
 
function run(){    
  var Stream = 'あいうえお';
  SaveToFile('test.txt',Stream);
}

こちらのコードの方がシンプルで良いですね。

関連サイト

プチラボ
http://www.petitmonte.com/labo/
JavaScriptでPDFやエクセル、ワードなどのOfficeファイル、BMP/PNG/JPEG/GIF/ICOなどの画像ファイルの読み書き、EXE/DLLファイルの編集など。





関連記事


前の記事：複数データをUint8Arrayに高速で書き込む[データをメモリへ書き込む]
次の記事：Base64変換(エンコード/デコード)で日本語文字列に対応する[ユニコード/Unicode]

公開日：2016年01月04日 最終更新日：2016年10月05日
記事NO：01680