jiichan.com

PROGRAMMING

javascript
CSS
PHP
Java

ファイルを作成しローカルに保存

申告に必要なデータをサーバーから取り出しcsvにする必要がありました。
javaだと契約しているサーバーにアクセスできないのでjavascriptで出来ないか調べたらいい方法があったので忘れないようにメモしておきます。
ファイルは<a>タグのダウンロードを利用しますのでダウンロードフォルダに保存されます。

ダウンロード用のHTML

ダウンロード用のアンカータグを配置します。 

<a href="#" id="shinkoku">確定申告用csvダウンロード</a>

アンカータグのhref属性とダウンロード属性はjavascript側で指定しました。

データを取得しダウンロードフォルダに保存

サーバーに保存してあるデータを取得し、csvに加工のうえファイルとしてダウンロードします。 

$.getJSON("getdata.php", {"year":year}, function(jsonStr){
	// サーバーでのデータ取得
	var csvStr = "";
	$.each(jsonStr, function(i, obj){
		csvStr += obj.data + "," + 
		obj.money + "," + 
		obj.memo + "," +
		obj.shop + "\n"; 
	});

	// ダウンロード処理
	var blob = new Blob([csvStr], {type: "text/plain"});
	var obj = document.getElementById("shinkoku");
	var blob_url = window.URL.createObjectURL(blob);	
	obj.href = blob_url;
	obj.download = "shinkoku.csv";
});

 ・ 12行目：プレーンテキストのcsvStrをコンテンツとしたBlobオブジェクトを作る。
 ・ 13行目：アンカータグを取得する。
 ・ 14行目：createObjectURLで指定ファイルの内容全体がエンコードされ、URLテキストになる。
 ・ 15行目：アンカータグのリンク先にURLテキストを指定する。
 ・ 16行目：アンカータグのダウンロード属性に保存するファイル名を指定する。


【Blobコンストラクタのオプションいろいろ】 

var blob = new Blob([file], {type: "image/png"});
var blob = new Blob([binary], {type: "application/octet-binary"});
var blob = new Blob(["文字列"], {type: "text/plain"});
var blob = new Blob(["<html>"], {type: "text/plain;charset=UTF-8"});

これは便利に使えます。

-->