How to open Blob URL on Chrome iOS
I’d like to open Blob object in a browser window.
This code works everywhere but iOS Chrome (and IE of course but I can solve IE). The window is not redirected to the url (which is correct or at least the same as in other browsers). Is there any known workaround for Chrome iOS?
var blob = new window.Blob(['Hello, world!'], {type: 'text/plain;charset=utf-8'});
window.URL = window.URL || window.webkitURL;
var url = window.URL.createObjectURL(blob);
window.location.href = url;
I’ve tried <a href="https://stackoverflow.com/questions/24485077/{blobUrl}> instead of window.location.href but it doesn”t work either.
FileReader solved my problem.
var reader = new FileReader();
var out = new Blob([this.response], {type: 'application/pdf'});
reader.onload = function(e){
window.location.href = reader.result;
}
reader.readAsDataURL(out);
FileReader.readAsBinaryString method has been deprecated.
Bit late, but I had todo something similar using the FileReader.readAsDataURL – which produces a dataUrl. I’m using AngularJS $http service to call the API to create a pdf. Hope this helps, see below:
$http.post('/api/pdf', {id: '123'}, {responseType: 'arraybuffer'})
.success(function (response) {
var blob = new Blob([response.data], {type: 'application/pdf'});
var reader = new FileReader();
reader.onloadend = function(e) {
$window.open(reader.result);
}
reader.readAsDataURL(blob);
});
None of these solutions worked for me on Safari. I had to create a link on the page.
const downloadBlob = (fileName, blob) => {
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.target="_blank";
link.download = fileName;
document.body.appendChild(link);
link.click();
}
const blob = new Blob([data], { type: 'video/mp4' });
downloadBlob('myfile.mp4', blob)
I fixed it by changing content-type from application/json to application/octet-stream. My xlsx file was downloaded as json.
@PostMapping(value = “/export”, produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
