Created
April 15, 2019 06:12
-
-
Save daimagine/cb3c6e75011b340f878452b243241abb to your computer and use it in GitHub Desktop.
Download file from API blob result
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 'download-blob.js', inspired by this gist: | |
// 'dreamyguy/downloadFile.js' https://gist.github.com/dreamyguy/6b4ab77d2f118adb8a63c4a03fba349d | |
// I added some handler to make it works in Chrome, Safari, and Firefox on iOS | |
const downloadBlob = ( | |
result, | |
defaultFilename = 'content.dat', | |
mime = 'application/octet-stream' | |
) => { | |
if (window && result && result.data) { | |
console.log('download blob', result, false) | |
// get filename | |
const disposition = result.headers['content-disposition'] | |
const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/ | |
const matches = filenameRegex.exec(disposition) | |
const filename = (matches != null && matches[1]) | |
? decodeURIComponent(matches[1].replace(/['"]/g, '')) | |
: defaultFilename | |
// extract user agent | |
const userAgent = window.navigator.userAgent.toLowerCase() | |
const ios = /iphone|ipod|ipad|crios|fxios/.test(userAgent) | |
const chrome = /crios/.test(userAgent) | |
// create blob | |
// It is necessary to create a new blob object with mime-type explicitly set | |
// otherwise only Chrome works like it should | |
const blob = new Blob([result.data], { type: mime }) | |
const blobURL = window.URL.createObjectURL(blob) | |
// if its ipad or iphone | |
if (ios) { | |
var reader = new FileReader() | |
reader.onload = () => { | |
if (chrome) { | |
window.open(blobURL) | |
} else { | |
window.location.href = blobURL | |
} | |
} | |
reader.readAsDataURL(blob) | |
return | |
} | |
if (typeof window.navigator.msSaveBlob !== 'undefined') { | |
// IE doesn't allow using a blob object directly as link href. | |
// Workaround for "HTML7007: One or more blob URLs were | |
// revoked by closing the blob for which they were created. | |
// These URLs will no longer resolve as the data backing | |
// the URL has been freed." | |
window.navigator.msSaveBlob(blob, filename) | |
return | |
} | |
// Other browsers | |
// Create a link pointing to the ObjectURL containing the blob | |
const link = document.createElement('a') | |
link.href = blobURL | |
link.style.display = 'none' | |
link.setAttribute('download', filename) | |
// Safari thinks _blank anchor are pop ups. We only want to set _blank | |
// target if the browser does not support the HTML5 download attribute. | |
// This allows you to download files in desktop safari if pop up blocking | |
// is enabled. | |
if (typeof link.download === 'undefined') { | |
link.setAttribute('target', '_blank') | |
} | |
document.body.appendChild(link) | |
link.click() | |
document.body.removeChild(link) | |
setTimeout(() => { | |
// For Firefox it is necessary to delay revoking the ObjectURL | |
window.URL.revokeObjectURL(blobURL) | |
}, 100) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment