Open blob objectURL in Chrome

Question

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?

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! — Adrián Paredes, Dec 11 '17 at 14:50

score 87 · Accepted Answer · answered Apr 18 '17 at 11:47

87

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

answered Apr 18 '17 at 11:47

bol89

886
8
7

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!) – Xenos Nov 12 '19 at 09:55
The mentioned `|blob:$popup` was removed from EasyList in [this commit](https://github.com/easylist/easylist/commit/e797d6387be48555aeda27ee79477d17677a2bc7#diff-1b4e03b73bd3077b166228ad052f1c15a6c2f75907d0163030de451187dd36b2). – nh2 Aug 07 '23 at 15:18

score 22 · Answer 2 · answered Jun 29 '18 at 11:59

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);
}

I used let newWindow = window.open('/'); newWindow.onload = () => { newWindow.location.assign(blobURL); }; where blobURL is of type string. Thanks — Jitendra Sawant, Jul 07 '21 at 08:52

score 2 · Answer 3 · answered Jun 27 '19 at 20:53

2

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

answered Jun 27 '19 at 20:53

Youn Oh

29
1

This solution works for me in both Chrome and Firefox with uBlock Origin. – Marc Jul 12 '19 at 08:11

score 1 · Answer 4 · answered Feb 03 '22 at 22:56

1

Unfortunately none of the above solutions worked. The new window still gets blocked in production, in development it works. Only Chrome blocks, in Edge it's all fine.

answered Feb 03 '22 at 22:56

bgman

309
1
5

If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/late-answers/30984352) – Joosep Parts Feb 08 '22 at 05:21

score 0 · Answer 5 · answered Jun 27 '19 at 07:50

0

Salaam

blob:http://***.***.***.**/392d72e4-4481-4843-b0d4-a753421c0433

Blobs are not blocked by chrome but are blocked by AdBlock extension Either:

Pause on this site
Don't run on pages on this site
Or Disable or Remove AdBlock Extension

answered Jun 27 '19 at 07:50

Ali Jamal

1,383
1
13
20

score 0 · Answer 6 · answered Nov 20 '19 at 14:51

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)

Doesn't work with Firefox 75. A warning "popup blocked" is displayed to user, and `newWindow` is `null` after calling `open()`. — despatates, Apr 15 '20 at 10:46
work for me with a little change: ```var fileURL = URL.createObjectURL(blob); let newWindow = window.open(fileURL);``` — arkhein, May 13 '20 at 06:44

score -1 · Answer 7 · answered Feb 05 '20 at 20:43

-1

I do not have Ad blocker. Looks like setting the blob type explicitly to application/pdf will solve this issue.

const newBlob = new Blob([blobData], {type: "application/pdf"});

answered Feb 05 '20 at 20:43

Marvin Sankar

19

score -2 · Answer 8 · answered Apr 23 '23 at 20:19

-2

Done, I just added the {type:"application/pdf"} or you just add the any content type.

answered Apr 23 '23 at 20:19

Petro Jackson

1

Open blob objectURL in Chrome

8 Answers8

Linked