魔術師見習いのノート

本稿はJavascriptやHTML5，CSSを使ったコードレシピ集である(随時更新予定)。

ファイル生成

HTMLでボタンを押したら"Hello, World!"と記述されたテキストファイルを生成するには，次のようなコードを記述する。

<script>
function createFile(){
  blob = new Blob(["Hello, World!\n"]); 
  var anchor = document.createElement("a");
  var evt = document.createEvent("MouseEvent");

  anchor.download = "file.txt";
  anchor.href = (window.URL || window.webkitURL).createObjectURL(blob);
  evt.initEvent("click", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
  anchor.dispatchEvent(evt);
}
<script>
<input type="button" onClick="createFile();" value="button">

IE

IE相手にで同じような処理を行わせたい場合，msSaveBlobやmsSaveOrOpenBlobメソッドを使用する方法がある。前者は保存させたい場合に，後者は保存か開くかを選ばせたい場合に使用する。使い方は同じであるが，ここではmsSaveBlobメソッドを使用した例を示す。

function createCSV(){
  var str = "得意先コード,得意先名,電話番号,住所 \n\
AX0001,山田太郎,999-999-9999,ほげ県ふが市ぴよ町0-0 \n\
BX0002,鈴木次郎,000-000-0000,ほげ県ふが市ぴよ町1-1 \n\
CX0003,佐藤三郎,111-111-1111,ほげ県ふが市ぴよ町0-0 \n\
DX0004,衛宮四郎,222-222-2222,ほげ県ばあ市ぴよ町0-0\n";
  var blobObject = new Blob([str], { type: "text/csv" });
  window.navigator.msSaveBlob(blobObject, 'file.csv');
}

私の環境では生成されたファイルの文字コードがUTF-8になったが，それをShift_JISとして生成する方法は次の通りである。

function createSJIS(){
  var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
  var str = "得意先コード,得意先名,電話番号,住所 \n\
AX0001,山田太郎,999-999-9999,ほげ県ふが市ぴよ町0-0 \n\
BX0002,鈴木次郎,000-000-0000,ほげ県ふが市ぴよ町1-1 \n\
CX0003,佐藤三郎,111-111-1111,ほげ県ふが市ぴよ町0-0 \n\
DX0004,衛宮四郎,222-222-2222,ほげ県ばあ市ぴよ町0-0\n";
  var blobObject = new Blob([bom, str], { type: "text/csv" });
  window.navigator.msSaveBlob(blobObject, 'hoge.csv');
}

ページ?

selectタグやinnerHTMLを使用してページを指定するようにして画面の表示を変更する例を以下に示す。

<script>
var ary = ["AX0001山田太郎000-000-0000ほげ県ふが市ぴよ町0-0BX0001鈴木次郎000-000-0000ほげ県ふが市ぴよ町1-1","CX0001佐藤三郎000-000-0000ほげ県ふが市ぴよ町0-0DX0001衛宮四郎000-000-0000ほげ県ばあ市ぴよ町0-0"];
function changePage(){
  document.getElementById("cpage_tbody").innerHTML = ary[parseInt(this.cpage.value) - 1];
}
</script>

<div align="center">
  <table class="sep">
    <thead>
      <tr><th>得意先コード</th><th>得意先名</th><th>電話番号</th><th>住所</th></tr>
    </thead>

    <tbody id="cpage_tbody">
      <tr><td>AX0001</td><td>山田太郎</td><td>000-000-0000</td><td>ほげ県ふが市ぴよ町0-0</td></tr>
      <tr><td>BX0001</td><td>鈴木次郎</td><td>000-000-0000</td><td>ほげ県ふが市ぴよ町1-1</td></tr>
  </table>

  <br>

  <select id="cpage" name="cpage" onChange="changePage()">
    <option value="1" selected>1</option>
    <option value="2">2</option>
  </select>/2
</div>