Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to open Blob URL on Chrome iOS

Tags:

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.

like image 968
daerin Avatar asked Jun 30 '14 07:06

daerin


People also ask

How do I open a blob link?

Right-click on the webpage and click “Inspect” in the menu. When the DevTools panel opens, click on the three vertical dots in the top-right corner and select “Undock into a separate window.” Press Ctrl + F on Windows or Cmd + F on Mac devices to find the blob URL. Enter “ blob:HTTP ” to find the link for the video.

How do I open a blob file in browser?

If you cannot open your BLOB file correctly, try to right-click or long-press the file. Then click "Open with" and choose an application. You can also display a BLOB file directly in the browser: Just drag the file onto this browser window and drop it.

How do I open a blob file in HTML?

Also you can use some another page like /loading , with loading indicator. Then you need to wait newWindow loading, and you can push url of your blob file in this window: newWindow. onload = () => { newWindow.

Can I use blob URL?

No, Blob URLs/Object URLs can only be made internally in the browser. You can make Blobs and get File object via the File Reader API, although BLOB just means Binary Large OBject and is stored as byte-arrays. A client can request the data to be sent as either ArrayBuffer or as a Blob.


2 Answers

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); 
like image 82
daerin Avatar answered Sep 19 '22 19:09

daerin


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);     }); 
like image 36
keano Avatar answered Sep 22 '22 19:09

keano