2013-10-20

javascript：ファイルの出力

リンクをクリックしてテキストをローカルファイルに出力
（IE10の場合、ローカルでは動作しない。）

サンプル
応用例（GPXファイルを加工するウェブアプリ）

◆html

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <title>Blob</title>
  5. <script src="jquery.js"></script>
  6. <script src="Blob.js"></script>
  7. </head>
  8. <body>
  9. <textarea id="content" cols="40" rows="5">Hello, World!
  10. こんにちは、みなさん！</textarea><br>
  11. <a id="download" target="_blank">ダウンロード（IEでは、右クリック＞対象をファイルに保存）</a>
  12. </body>
  13. </html>

◆javascript(Blob.js)

20行目："type"を"application/x-msdownload"に設定することで、テキストでもダウンロードが可能。"text/plain"に設定するとブラウザに表示されてしまう。
"type"を設定せずに、var blob = new Blob([ content ]);としてもダウンロードできた（2016-05-31）
25行目："tmp.txt"は保存するときのデフォルトのファイル名。IEでは動作しない。

注意）
contentに日本語が含まれているとUTF-8で、含まれていないとShift-JISで保存される。
Shift-JISで保存されたgpxファイルをテキストエディタで日本語を含むように書き換えた場合、Googleのマイマップで読み込むと文字化けする。

  1. $(function() {
  2.  
  3.  if (typeof Blob !== "undefined") {
  4. //  alert('このブラウザに対応しています');
  5.  } else {
  6.   alert('このブラウザには対応していません');
  7.  }
  8.  
  9.  $("#content").keyup(function(){
  10.   setBlobUrl("download", $("#content").val());
  11.  });
  12.     
  13.     $("#content").keyup(); // 上で設定したkeyupイベント(setBlobUrl)を実行する
  14.  
  15. });
  16.  
  17. function setBlobUrl(id, content) {
  18.         
  19.  // 指定されたデータを保持するBlobを作成する。
  20.     var blob = new Blob([ content ], { "type" : "application/x-msdownload" });
  21.  
  22.  // Aタグのhref属性にBlobオブジェクトを設定する。
  23.     window.URL = window.URL || window.webkitURL;
  24.     $("#" + id).attr("href", window.URL.createObjectURL(blob));
  25.     $("#" + id).attr("download", "tmp.txt");
  26.  
  27. }


◆javascript(jquery.js)

jQueryからダウンロード


参考にしたページ




以上





投稿者 時刻:
ラベル: