ここのことはなかったことにするかもしれない

仕事がらみの記事を主として扱いますが、あくまで個人ブログです。2013年以前の記事は https://yellow-73.hatenablog.com/ にあります。

[JavaScript] 内部で生成したデータをダウンロードさせる

FireFoxではうまくいったので、晒しておきます。

URIスキームが"data"の場合(URIが"data:"で始まる場合)、「データ」を入れ込むことができます。
これを任意にダウンロードさせようと MIME-TYPEを "application/octet-stream" にすると、ダウンロードファイル名がめちゃくちゃになったので、やめた。

で、a要素に downloadプロパティを付ければOKみたいなのが分かりました。これで、a要素を生成して適切に属性をつければOK。
ただ、これはクリックしないといけない。そこで、createEvent、initEvent、dispatchEventを順序通り実行したら、クリックしたことにしてくれます。

なお、Internet Explorerは、画像以外ではData URIに対応していない(画像ならOK)ため、ダメです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト</title>
</head>
<body>

<script>

function doit() {
  var uri = "data:text/xml;charset=UTF-8,"
    + encodeURI(
      "<?xml version=\"1.0\">\n"
      + "<data>\n"
      + "  <person>\n"
      + "    <name>山田太郎</name>\n"
      + "    <age>20</age>\n"
      + "  </person>\n"
      + "<data>\n"
    );
  var e = document.createElement("a");
  e.setAttribute("download", "donwload.xml");
  e.setAttribute("href", uri);
  e.appendChild(document.createTextNode("download.xml"));
//  document.getElementById("MAIN").appendChild(e);

  // IEXMLはダメ
  // e.fireEvent("onclick");

  // Perform MouseEvent:click event.
  var ev = document.createEvent("MouseEvents");
  ev.initEvent("click", false, false); // bubbles=false, cancelable=false
  e.dispatchEvent(ev);
};

doit();
</script>

<div id="MAIN"></div>

</body>
</html>