Open blob objectURL in Chrome Open blob objectURL in Chrome google-chrome google-chrome

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