Javascript -> file-download Edge -> set "from" to actual site

Question

I can download files from my server. After a lot research I found this method in javascript:

fetch("requestUrlToFile",
    {
        method: "GET",
        headers: {
            "authorization": "jwt"
        }
    })
        .then(checkStatus)
        .then(function(res){
            return res.blob();
        })
        .then(function(blob){
            var filename =  "PdfName-" + new Date().getTime() + ".pdf";
            if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE
                var blob = new Blob([blob], { type: 'application/pdf' });
                window.navigator.msSaveBlob(blob, filename);
            } else {//if (typeof window.chrome !== 'undefined') { // Chrome
                var link = document.createElement('a');
                link.id = "download_" + billingId;
                link.className = "hidden";
                link.href = window.URL.createObjectURL(blob);
                link.download = filename;
                $downloads.appendChild(link);
                link.click();
                $downloads.innerHTML = "";
            } 
        });

This works in all modern browsers (IE 10+, Edge, FF, Chrome, Opera). But Safari and mobile browsers don't work.

Can you help me with it?

Answer 1

I found a solution that works in every common browser i found here: W3Counter: Global Web Stats.

I used the Blob implementation of eligrey on github: Eligrey Blob.js as a polyfill.

Tested:

• IE > 10 (Windows)
• Edge (Windows)
• Chrome (Windows, Android, iOS)
• FireFox (Windows, Android)
• Safari (Mac, iOS, Windows)
• Opera (Windows)

fetch("requestUrlToFile",
{
    method: "GET",
    headers: {
        "authorization": "jwt"
    }
})
    .then(checkStatus)
    .then(function(res){
        return res.blob();
    })
    .then(function(data){
        var filename =  "PdfName-" + new Date().getTime() + ".pdf";
        var blob = new Blob([data], { type: 'application/pdf' });
        download(blob, filename);
    });

function download(blob, filename) {
  //first we need to prepend BOM for the UTF-8 text types
  if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
    blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
  }
  //than we need to declare all variable to check which download we need to use
  var donwload_url = window.URL || window.webkitURL || window
      ,blob_url = download_url.createObjectURL(blob)
      ,download_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
      ,use_download_link = "download" in download_link
      ,click = function(node){ var event = new MouseEvent("click"); node.dispatchEvent(event); }
      ,is_opera = (!!view.opr && !!opr.addons) || !!view.opera || navigator.userAgent.indexOf(' OPR/') >= 0
      ,is_chrome = !!view.chrome && !!view.chrome.webstore
      ,is_safari = Object.prototype.toString.call(view.HTMLElement).indexOf('Constructor') > 0 || !is_chrome && !is_opera && view.webkitAudioContext !== undefined
      ,is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent)
      ,forceable_type = "application/octet-stream"
      ,type = blob.type
      ,forced_download = type === forceable_type;
  //now we can start checking which download we use
  if (typeof window === "undefined" || typeof window.navigator !== "undefined" && /MSIE [1-9]\./.test(window.navigator.userAgent)) {
      return; //IE <10 is not supported
  } else if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
      window.navigator.msSaveOrOpenBlob(blob, filename);
  } else if(use_download_link) {
      download_link.href = blob_url;
      download_link.download = filename;
      click(save_link);
  } else if((is_chrome_ios || (forced_download && is_safari)) && window.FileReader){
      var reader = new FileReader();
      reader.onloadend = function(){
          var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;');
          var openWindow = window.open(url, "_blank");
          if(!openWindow) window.location.href = url;
      }
  } else {
      if(force){
          window.location.href = blob_url;
      } else { 
          var openWindow = window.open(blob_url, "_blank");
          if(!openWindow) window.location.href = url;
      }
  }
}