FileSaver.js が必要です。 保存タイプ 1) text 要素の内部テキストを取得( value または innerText ) ※ nobom プロパティを true にすると UTF8N で保存されます ( nobom のデフォルトは false ) 2) html 要素の outerHTML を取得 3) table テーブル要素を csv データとして取得 ※ nobom プロパティを false にして UTF8 で保存する事によって、Excel で読み込めます ( nobom のデフォルトは false ) 4) image (URL で指定された画像の場合) そのままそのサーバーからダウンロード IE が、A 要素の download 属性をサポートしていないので IE は 不可 ( ie プロパティでその際のエラーメッセージ指定できます ) 5) image (base64 で指定された画像の場合) base64 をバイナリに変換して保存
| 所属コード | 所属名称 | 作成日 | 更新日 |
|---|---|---|---|
| 0001 | 営業部第一 | 2004/05/05 | 2004/05/05 |
| 0002 | 営業部第二 | 2004/05/05 | 2004/05/05 |
| 0003 | 営業部第三 | 2004/05/05 | 2004/05/05 |
| 1001 | 総務部 | 2008/04/02 | 2008/04/02 |
デモ用のコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.js"></script>
<script src="https://lightbox.sakura.ne.jp/demo/template/lightbox-env/saver.js"></script>
<script>
$(function(){
$("#btn_text")
.on( "click", function(){
$("#textarea").save( {
type : "text",
name : "mydata.txt",
nobom : true
} );
});
$("#btn_tbl")
.on( "click", function(){
$("#tbl").save( {
type : "table",
name : "mydata.csv",
nobom : false
} );
});
$("#btn_html")
.on( "click", function(){
$("body").save( {
type : "html",
name : "mydata.html",
nobom : true
} );
});
// IE は対象外
$("#btn_img")
.on( "click", function(){
$("#img").save( {
type : "image",
ie: "IE では画像を右クリックしてメニューから保存して下さい" // IE 用メッセージ
} );
});
// IE も OK
$("#btn_base64")
.on( "click", function(){
$("#base64").save( {
type : "image"
} );
});
$("#btn_img,#btn_text,#img,#textarea,#base64,#btn_base64")
.css({ "display": "inline-block", "vertical-align": "top" });
$("#tbl")
.css({ "margin-top": "15px" });
});
</script>
<div>
<input id="btn_text" type="button" value="textarea(テキスト)">
<input id="btn_tbl" type="button" value="テーブル(CSV)">
<input id="btn_html" type="button" value="BODY(HTML)">
<input id="btn_img" type="button" value="画像(URL)">
</div>
<div style='margin-top:10px'>
<input id="btn_base64" type="button" value="画像(base64)">
<img id="base64" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAASdSURBVEhLlVZ/TNRlGP/ccSRwcMkEhLWgVAItwDxysaWLVmKj8aN/GvRjiYFzyq9qE2uJILUkJhtji2BOc9ay1ejXGIOkBsEKuqSrtSRS2ik/5owxjsjweHre5/3CHcpN+YwP73PP+3nf5/3xvM8daCX4oYPo5aeIvvnUcNwebh1kdoboWBnRAyxNYNqZicyNzHf2cb/bEPoHK/2g50ui/CSiWJaoAEnMzaCT60060IPMZKbqf26z3qUfsMIHnut61WpCtepUZhrzIebJN+jj480EgBr3FxC9lqmDPWLWuvuYW5jNh4zJvOBlcaQFVOQCn38GRLI9H4Devz34MTgav2x/FiOXLsPZ14Mro5dhi1yLjWnbcNe1SWxynsVWmwlPhptgCZwHxtQ8h4HdlTKlQEIZmLkHVBYNWh0AWfFKucoEKo0CudXOfOD91Npw06Ds7Gyqra2ljo4OcrlchlBjfHycuru7qb6+XnQWi2XJWPq9z1D6HtcTVpi//kcUJSUlKC8vx9zcHOLj46VboaurC4GBgTCZTDCbzeCJ5bPVasXIyAgyMjJgZt2BNcBb+elAQ5ceKKGGBoniQb33e1fiS6fTSbGxscv23chT9khOBp42zntI2irdSZTCJqfkhUujiwNyc3OlTU5OJofDQTk5OZSXlye+sLAwSk9PFzslJYUSEhLE7u3p0e+IF0wnamR6HYQvXILU7CLHBZeIMzM5RRnKVrvwhfIlJSXR4OCg2E1NTVRVVSW2468xold4rHpDD3N6Kz2dadBR1zEnx+ls93ciLiws1AK24+LixB4eHqbi4mLx2Ww22rFjh9ipqakUEREh9sTkFJFrSI6fNjCHznEQ9ar5JdNOPksGX66ICwr4wTGUnZiYSKOj3mP0x6ioKBkj2MRzqtN5/Rky4+m9wBxL/rjC/xgBFt36ICQkBHV1dWKXlpZKyytHf38/2tvb0dbWhoGBAUxMTEgf+toAD7f/MbdlcXgFdSeqlLxbQV2On2VVvjux2+3EaS22SgDVxsTESP+yeGGLrm2q1DBUWgNZGZAEb34bXBvE5QvWge9A7KCgIGnHxlT9WAae68C3P+mdPL9LXDrI3jcBN7cm5nuHxOULFSQ4OFjs6elpcOaJXV1dLe0SNB4A7uR2irm/Vlw6SKIdiOYd8J+l8xNxzc9zsTOgXvbMzIzYHo8Hra2tYldWVqKlpUXsRbQc4wHcpm4AVkeISwdR2FMD/Au4SG0HCF2jBQput1suVoEfnZQSrmfyuaioSErP985fgYGvxIdZ5r6j2laQmzEwtd6bjsMfNYtv7br4Rd8Ncvrz4kXCKuuS/oMxoFm/VZixIMwPZ7d6sY+G0GDFi4v+Ex98aCh90Pk+NfHEAYZmgb5Y8qX1asVBhF1zo7K/EbjKjhDmHcARF9+FNRSHf+OMsoTypXJnfRlw+jSnG2usTH4T5yfZvTUHofcmoO4oZ+oCJNRy6DxD9Hi4LjcLX8PKfsymW/WuFFW1zbqbqO2UMfBmsOIWOH+OaM92/YNBTapKhaqy6jdAzW6iq+OG0D9YuQIcP0L0UhpR9xeG43ZA9D+D0zyeXYGzAwAAAABJRU5ErkJggg==">
<img id="img" src="http://toolbox.winofsql.jp/image/jquery.png">
<textarea id="textarea">あいうえお</textarea>
</div>
<table id="tbl">
<tbody><tr><th>所属コード</th><th>所属名称</th><th>作成日</th><th>更新日</th></tr>
<tr><td>0001</td><td>営業部第一</td><td>2004/05/05</td><td>2004/05/05</td></tr>
<tr><td>0002</td><td>営業部第二</td><td>2004/05/05</td><td>2004/05/05</td></tr>
<tr><td>0003</td><td>営業部第三</td><td>2004/05/05</td><td>2004/05/05</td></tr>
<tr><td>1001</td><td>総務部</td><td>2008/04/02</td><td>2008/04/02</td></tr>
</tbody></table>
saver.js
$.fn.extend({
save : function(option){
option = option || {};
var type = option.type || "text";
var mime = option.mime || "text/plain";
var name = option.name || "save.txt";
var charset = "utf-8";
var nobom = option.nobom || false;
if( type == "text" ) {
var text = $(this).val();
if ( text == "" ) {
text = $(this).text();
}
saveAs(
new Blob(
[text]
, {type: mime + ";charset=" + charset}
)
, name, nobom
);
}
if( type == "html" ) {
var text = $(this).prop("outerHTML");
saveAs(
new Blob(
[text]
, {type: mime + ";charset=" + charset}
)
, name, nobom
);
}
if( type == "table" ) {
var csv = "";
var cnt = 0;
$(this).find("tr").each( function(){
$(this).find("td,th").each(function( col_cnt ){
if ( col_cnt != 0 ) {
csv += ",";
}
csv += "\"" + $(this).text() + "\"";
});
csv += "\n";
cnt++;
} );
saveAs(
new Blob(
[csv]
, {type: mime + ";charset=" + charset}
)
, name, nobom
);
}
if( type == "image" ) {
var src = $(this).prop("src");
// base64 bin
if ( src.substr(0,5) == "data:" ) {
var bin = atob(src.split(',')[1]);
var head = src.split(',')[0];
var type = head.split(/[:;]/)[1];
var buffer = new Uint8Array(bin.length);
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
var blob = new Blob([buffer.buffer], {type: type});
if ( type == "image/jpeg" ) {
name = "save" + (new Date()).getTime()+".jpg";
}
if ( type == "image/gif" ) {
name = "save" + (new Date()).getTime()+".gif";
}
if ( type == "image/png" ) {
name = "save" + (new Date()).getTime()+".png";
}
saveAs( blob, name );
}
// url
else {
var userAgent = window.navigator.userAgent.toLowerCase();
// OLD IE
if (userAgent.indexOf("msie") > -1) {
if ( typeof option.ie !== 'undefined' ) {
alert(option.ie);
}
else {
alert("unsupported!");
}
return;
}
// IE11
else if (userAgent.indexOf("trident/7.0") > -1) {
if ( typeof option.ie !== 'undefined' ) {
alert(option.ie);
}
else {
alert("unsupported!");
}
return;
}
else {
var work = src.split("/");
var name = work[work.length-1];
var download = $("<a></a>").css("display","none").appendTo("body");
download.prop({"href" : src, "download": name });
download.get(0).click();
download.remove();
}
}
}
return $(this);
}
});
|
|
【プラグイン作成(jQuery)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery のプラグインとしてストリートビューを利用する
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン
- jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )
