Open blob objectURL in Chrome Open blob objectURL in Chrome javascript javascript

Open blob objectURL in Chrome


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


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


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', fileObjectURLnew_window = window.open()new_window.onload = ->  $(new_window.document.body).append $object