下載 Blob 在 IE 11 遇到的問題

透過 JavaScript 下載 Blob ，發現在 IE 11 上，不能下載

範例程式如下，以下程式在 IE 就無法下載

var saveData = (function () {
    var a = document.createElement("a");
    return function (data, fileName) {
        var json = JSON.stringify(data),
            blob = new Blob([json], {type: "octet/stream"}),
            url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
    };
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

主要原因是 createObjectURL 在 IE 11 中沒有作用

雖然 createObjectURL 在 MDN 中寫了支援 IE 11 ，但是不知道為什麼就是沒有效；參考了 stackoverflow 此篇討論更改使用 navigator.msSaveOrOpenBlob

var saveData = function() {
  var a = document.createElement("a");
  var json = JSON.stringify(data),
    blob = new Blob([json], {
      type: "octet/stream"
    });
  if (window.navigator && window.navigator.msSaveOrOpenBlob) { // for IE
    window.navigator.msSaveOrOpenBlob(blob, fileName);
  }
};

var data = {
    t: "hello, world",
    d: new Date()
  },
  fileName = "my-download.json";


document.querySelector('button').addEventListener('click', saveData);

參考資料

stackoverflow