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?
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; } } }
翻译