javascript - link - open blob in new window

Abrir blob objectURL en Chrome

Question

Quiero abrir un PDF en una nueva pestaña en el navegador Chrome (Chrome 56.0.2924.87, Ubuntu 14.04) usando window.open(fileObjectURL) en javascript. Estoy creando el blob a partir de datos codificados en base64 y creo un objectURL como este:

const fileObjectURL = URL.createObjectURL(fileBlob); 

Funciona bien en el último navegador Firefox. Pero en Chrome puedo ver que la nueva pestaña se abre pero luego se cierra de inmediato. Así que no recibo ningún error en la consola, etc. La única forma en que funciona ahora en Chrome es dar los datos de base64 directamente a la función window.open(fileBase64Data) . Pero no me gusta que los datos completos se establezcan en la url.

Tal vez esto es un problema de seguridad con Chrome bloqueando la apertura de manchas?

Answer 1

Debe abrir una nueva ventana antes de poner la URL de blob en la ventana:

let newWindow = window.open(''/'')

También puedes usar alguna otra página como /loading , con indicador de carga.

Luego, debe esperar a que se cargue newWindow y puede insertar la url de su archivo blob en esta ventana:

newWindow.onload = () => {
newWindow.location = URL.createObjectURL(blob);
};

La extensión de Adblock no la bloquea.

Lo estoy usando con los generadores AJAX y ES de esta manera:

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

Answer 2

La causa es probablemente la extensión adblock (tuve exactamente el mismo problema).