Open blob objectURL in Chrome

javascript google-chrome base64 blob

58,546

Solution 1

The cause is probably adblock extension (I had exactly the same problem).

Solution 2

You must open new window before you put blob url in window:

let newWindow = window.open('/')

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.location = URL.createObjectURL(blob);
};

Adblock extension don't block it.

I'm using it with AJAX and ES generators like this:

let openPDF = openFile();
openPDF.next();
axios.get('/pdf', params).then(file => {
  openPDF.next(file);
});

function* openFile() {
  let newWindow = window.open('/pages/loading');
  // get file after .next(file)
  let file = yield;
  // AJAX query can finish before window loaded,
  // So we need to check document.readyState, else listen event
  if (newWindow.document.readyState === 'complete') {
    openFileHelper(newWindow, file);
  } else {
    newWindow.onload = () => {
      openFileHelper(newWindow, file);
    };
  }
}

function openFileHelper(newWindow, file) {
  let blob = new Blob([file._data], {type: `${file._data.type}`});
  newWindow.location = URL.createObjectURL(blob);
}

Solution 3

Work around way to by pass adblocker.

coffeescript & jquery

$object = $("<object>")
$object.css
  position: 'fixed'
  top: 0
  left: 0
  bottom: 0
  right: 0
  width: '100%'
  height: '100%'
$object.attr 'type', 'application/pdf'
$object.attr 'data', fileObjectURL
new_window = window.open()
new_window.onload = ->
  $(new_window.document.body).append $object

Solution 4

In plain vanilly javascript (because I don't have jquery)

let newWindow = window.open('/file.html');
newWindow.onload = () => {
    var blobHtmlElement;
    blobHtmlElement = document.createElement('object');
    blobHtmlElement.style.position = 'fixed';
    blobHtmlElement.style.top = '0';
    blobHtmlElement.style.left = '0';
    blobHtmlElement.style.bottom = '0';
    blobHtmlElement.style.right = '0';
    blobHtmlElement.style.width = '100%';
    blobHtmlElement.style.height = '100%';
    blobHtmlElement.setAttribute('type', 'application/pdf'); 
    blobHtmlElement.setAttribute('data', fileObjectURL);
    newWindow.document.title = 'my custom document title';
    newWindow.document.body.appendChild(blobHtmlElement);
};

/file.html is an almost empty html file, source:

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

</body>
</html>

Tested in chrome & firefox (on 20/november/2019)

View more solutions

58,546

Michbeckable

Updated on February 04, 2022

Comments

Michbeckable over 2 years
I want to open a PDF in a new tab in chrome browser (Chrome 56.0.2924.87, Ubuntu 14.04) using window.open(fileObjectURL) in javascript. I am creating the blob from base64 encoded data and do create an objectURL like this:
```
const fileObjectURL = URL.createObjectURL(fileBlob); 
```
It works fine in latest Firefox browser. But in Chrome I can see that the new tab gets opened but then closed immediately. So I don't get any error in the console etc. The only way it works in Chrome now is to give the base64 data directly to the window.open(fileBase64Data) function. But I don't like the complete data being set in the url.

Maybe this is a safety issue with Chrome blocking opening of blobs?
- Adrián Paredes over 6 years
  
  Do you know if there is a way to open a PDF in a new tab and set the file name in the URL? Thanks!
Marc almost 5 years

This solution works for me in both Chrome and Firefox with uBlock Origin.
Xenos over 4 years

Indeed, uBlockOrigin list called easylist (default one) has the rule |blob:$popup which blocks such new links with blob scheme, because (as stated by comment above in the list): ! Used with many websites to generate multiple popups (if you know which sites used that trick, please tell me!)
despatates about 4 years

Doesn't work with Firefox 75. A warning "popup blocked" is displayed to user, and newWindow is null after calling open().
arkhein almost 4 years

work for me with a little change: var fileURL = URL.createObjectURL(blob); let newWindow = window.open(fileURL);
Jitendra Sawant almost 3 years

I used let newWindow = window.open('/'); newWindow.onload = () => { newWindow.location.assign(blobURL); }; where blobURL is of type string. Thanks
Joosep Parts over 2 years

If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review