23

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="{blobUrl}> instead of window.location.href but it doesn't work either.

daerin
  • 1,347
  • 1
  • 10
  • 17

4 Answers4

37

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);
Endless
  • 34,080
  • 13
  • 108
  • 131
daerin
  • 1,347
  • 1
  • 10
  • 17
  • 1
    For some reason, this works for PDF for me in Chrome IOS, but not for epub, where epub's application type is: blob = new Blob([oReq.response], {type: 'application/epub+zip'}); The code works for both types in Safari, just not chrome. :( – nrshapiro Nov 22 '17 at 03:29
  • 1
    oh my... this part of my life is called Happiness – Jhonycage Jul 27 '18 at 00:01
  • Hi all, I need to manage an archive file in Chrome IOS, is it possible? I tryied to create a blob like new Blob([........], {type: 'application/zip'}); but the code don't work. – ottis79 Sep 21 '18 at 13:30
  • 1
    is it possible to open file in new window for IOS ? – Rutul Patel Sep 30 '19 at 15:09
8

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);
    });
Tim Harker
  • 2,367
  • 1
  • 15
  • 28
keano
  • 691
  • 7
  • 9
  • Hi, Keano Your solutions is working fine with Firefox, but when I tried with Chrome it doesn't seems to be working. It just shows the url but the pdf is not loaded. Can you please guide me with this? Thanks in advance. – Girish Vadhel Jan 30 '18 at 15:23
  • Hi, I use the FileReader.readAsDataURL with PDF stream fine with Firefox and Chrome. Since few days or weeks, users report me it does not work anymore with Chrome or Vivaldi (same engine) but still working on Firefox. Maybe a regression on Chromium ? – Floyd Jan 30 '19 at 09:37
1

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)
dǝɥɔS ʇoıןןƎ
  • 1,674
  • 5
  • 19
  • 42
0

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)

Arjun
  • 1