[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); // IEはXMLはダメ // 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>