JavaScript/HTMLおぼえがき

｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜

ファイルのダウンロード

テキストデータのダウンロード　　　戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ダウンロード（text）</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<textarea id="text" rows="4" cols="40">
テキストデータのダウンロードです。
ここで改行します。</textarea><br><br>
<a id="download" download="text-file.txt">url指定のtextダウンロード</a><br><br>
<button onclick="download()">ボタン指定のtextダウンロード</button>
<script>
  text = document.getElementById("text").value ;
  blob = new Blob([text], {type: 'text/plain'});
  link = document.getElementById('download'); 
  link.href = window.URL.createObjectURL(blob);
function download() {
  link = document.createElement('a');
  link.href = URL.createObjectURL(new Blob([text], {type: 'text/plain'}) ) ;
  link.download = "text-file.txt" ; 
  link.click();
}
</script>
</body>
</html>

CSVデータのダウンロード　　　戻る

JavaScriptの世界の文字コードはUnicodeなので、まずは、入力されたキーワードをShift_JISに変換する必要がある
JavaScriptのライブラリ encoding.js を使った文字コード変換encoding-japaneseのconvert()を使ってShift_JISに変換する。
ブラウザで読み込む

<script src="encoding.min.js"></script>

ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ダウンロード（text）</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://winofsql.jp/js/encoding.js"></script>
</head>
<body>
<textarea id="text" rows="5" cols="30">
csvデータのダウンロードです。
行列データ11,行列データ12
行列データ21,行列データ22</textarea><br><br>
<button onclick="download()">csvデータのダウンロード</button>
<script>
function download() {
  text = document.getElementById("text").value ;
  text = convert_sjis( text ) ;            //sjisコードに変換
  blob = new Blob([text], {type: 'text/plain'});
  link = document.createElement('a');
  link.href = URL.createObjectURL( blob ) ;
  link.download = "csv-file.csv" ; 
  link.click();
}
function convert_sjis( str ) { 
  str = str.replace(/\n/g, '\r\n');  // lf のみを crlf に変換
  var array = [] ;
  for( i = 0 ; i < str.length ; i++ ) { array.push(str.charCodeAt(i)) ; }
  var sjis_array = Encoding.convert(array, "SJIS", "UNICODE");
  return new Uint8Array(sjis_array); 
}
</script>
</body>
</html>

CANVAS画像のダウンロード　　　戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>ダウンロード（canvas）</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas><br><br>
<button onclick="download()">canvas画像のダウンロード(toBlob)</button><br><br>
<button onclick="download2()">canvas画像のダウンロード(toDataURL)</button>
<script>
  ctx = document.getElementById('canvas').getContext('2d');	
  ctx.fillStyle = "#0000ff" ;
  ctx.fillRect(0,0,300,200) ;
  ctx.fillStyle = "#ffffff" ;
  ctx.fillRect(50,50,200,100) ;
function download() {        //toBlob()でダウンロード
  canvas.toBlob(function(blob) {
    link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = "canvas-file.png" ; 
    link.click();
  },"image/png") ;
}
function download2() {        //toDataURL()でダウンロード
  a = document.createElement("a");
  a.href = canvas.toDataURL("image/jpeg", 0.75); // PNGなら"image/png"
  a.download = "image.jpg";
  a.click();
}
//  補足：MIMEタイプの指定
//  pngの場合は("image/png")
//  jpgの場合は("image/jpeg",品質)で品質は0～1の指定
//  指定がないと("image/png")とみなされます。
</script>
</body>
</html>

｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜