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