<a id="sample2" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333" download="sample2.csv">ダウンロード2</a>デモ
HTML
<a id="link1" href="sample/smp1.zip" download="smp1.zip">smp1.zip</a>
<a id="link2" href="sample/smp2.zip" download="smp2.zip">smp2.zip</a>
<a id="link3" href="sample/smp3.png" download="smp3.png">smp3.png</a>
<a id="link4" href="sample/smp4.txt" download="smp4.txt">smp4.txt</a>
<input type="button" value="複数ファイルダウンロード" onclick="test1()" class="btn btn-success btn-sm" />
JavaScript
function test1(){
$('#link1')[0].click();
$('#link2')[0].click();
$('#link3')[0].click();
$('#link4')[0].click();
}
<html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="bpgdec8b.js"></script> </head> <body> <img src="ike.bpg"> <img src="0.bpg"> </body> </html>サンプル
<canvas id="mycanvas" width="512" height="512"></canvas>
<script>
//ロードイベント
(function (){
var img, canvas, ctx;
canvas = document.getElementById("mycanvas");
ctx = canvas.getContext("2d");
img = new BPGDecoder(ctx);
img.onload = function() {
// draw the image to the canvas
ctx.putImageData(this.imageData, 0, 0);
};
//動的画像読込
img.load("ike.bpg");
})();
</script>
location.reload(true);
location.reload(false);
/**
* メールアドレスからドメイン部分を取り出す。
* 例）xsrhapieqd@docomo.ne.jp → docomo.ne.jp
* 空文字やメール形式でない場合は空文字を返す。
*/
function extractEmailDomain(mail){
if(mail =='' || mail==null){
return '';
}
var a=mail.indexOf('@');
if(a == -1){
return '';
}
var domain=mail.substr(a + 1);
return domain;
}
サンプル
var test={};
if (test['kani']){
alert('存在する');
}else{
alert('空！');
}
str.trim();//IE8は未対応JQueryによる代替
str=$.trim(str);//代替手段
//ArrayクラスにindexOfメソッドがなけいれば実装
if (!Array.indexOf) {
Array.prototype.indexOf = function(o) {
for (var i in this) {
if (this[i] == o) {
return i;
}
}
return -1;
}
}
参考サイト
//カタカナのバリデーション
function katakanaVld(v) {
var flg=false;
if(v.match(/^[ァ-ヶー]*$/)){
flg=true;
}
return flg;
}
var data_count = Object.keys(data).length;
var data={'id':1,'name':'animal'};
var data_count = Object.keys(data).length;
alert(data_count);//結果→2
var data={'id':1,'name':'animal','ary':{'a':1,'b':2}};
var data_count = Object.keys(data).length;
alert(data_count);//結果→3
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jqPlotグラフのダウンロード</title>
<script src="../../style2/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>
<script>
$( function() {
//▽グラフ作成処理
rec1 =[[1,null],[2,null],[3,null],[4,null],[5,null],[6,null],[7,null],[8,null],[9,null],[10,13],[11,9],[12,15],[13,14],[14,null],[15,null],[16,null],[17,null],[18,null],[19,null],[20,14],[21,10],[22,6],[23,40],[24,7],[25,7],[26,7],[27,40],[28,null],[29,null],[30,null],[31,null],];
rec2 =[[1,5],[2,54],[3,12],[4,52],[5,null],[6,null],[7,null],[8,null],[9,25],[10,23],[11,19],[12,5],[13,4],[14,5],[15,null],[16,null],[17,35],[18,null],[19,null],[20,24],[21,13],[22,16],[23,30],[24,37],[25,27],[26,17],[27,14],[28,null],[29,null],[30,null],[31,8],];
$.jqplot(
'graph_div',
[
rec1,
rec2
],
{
series: [
{ label: 'test' }
],
legend: {
show: true,
},
axes:{
xaxis:{
label:'日',
ticks: [
'1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31',
],
},
yaxis:{
label:'縦軸Y',
ticks: [
'50','45','40','35','30','25','20','15','10','5','1', ],
}
}
}
);
});
//グラフをimg要素へ表示する。
function test_show_img(){
var element = $('#graph_div')[0];
//DOM要素をcanvasに変換する。html2canvas.jsの機能
html2canvas(element, { onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
$('#img1')[0].src = imgData;
}});
}
//グラフダウンロード(シンプルコード版)
function test_graph_download_smp(){
var element = $('#graph_div')[0];
//DOM要素をcanvasに変換してからダウンロード
html2canvas(element, { onrendered: function(canvas) {
var imgData= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = imgData;
//window.open(imgData, 'save');//←こちらの方法でもダウンロードできる
}});
}
//グラフダウンロード
function test_graph_download(){
var element = $('#graph_div')[0];
//DOM要素をcanvasに変換する。html2canvas.jsの機能
html2canvas(element, { onrendered: function(canvas) {
//canvas.toBlob()が実装されていないブラウザに対応。
var type = 'image/jpeg';
// canvas から DataURL で画像を出力
var dataurl = canvas.toDataURL(type);
// DataURL のデータ部分を抜き出し、Base64からバイナリに変換
var bin = atob(dataurl.split(',')[1]);
// 空の Uint8Array ビューを作る
var buffer = new Uint8Array(bin.length);
// Uint8Array ビューに 1 バイトずつ値を埋める
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
// Uint8Array ビューのバッファーを抜き出し、それを元に Blob を作る
var blob = new Blob([buffer.buffer], {type: type});
//★FileSaver.jsによるファイルダウンロード
saveAs(
blob
, "test.png"
);
/*
canvas.toBlob(function(blob) {
saveAs(
blob
, "test.png"
);
});*/
}});
}
</script>
</head>
<body>
<h1 >jqPlotグラフのダウンロード</h1>
<div id="graph_div" style="height: 400px; width: 100%;"></div>
<input type="button" value="img要素に表示" onclick="test_show_img()" />
<input type="button" value="グラフダウンロード(シンプル版)" onclick="test_graph_download_smp()" />
<input type="button" value="グラフダウンロード(ファイル名指定可)" onclick="test_graph_download()" />
<hr>
<p>img要素</p>
<img id="img1" src="" />
※img要素なので右クリックによる画像ダウンロードができる。<br>
</body>
</html>
サンプル
サンプル参考
html2canvas