Ouvrez objectURL blob dans Chrome

Question

Je veux ouvrir un PDF dans un nouvel onglet du chrome (Chrome 56.0.2924.87, Ubuntu 14.04)) en utilisant window.open(fileObjectURL) en javascript Je crée le blob à partir de données codées en base64 et crée un objectURL comme celui-ci:

const fileObjectURL = URL.createObjectURL(fileBlob); 

Cela fonctionne bien dans le dernier navigateur Firefox. Mais dans Chrome, je peux voir que le nouvel onglet s’ouvre, puis se ferme immédiatement. Ainsi, je n’obtiens aucune erreur dans la console, etc. La seule façon dont cela fonctionne dans Chrome est maintenant de donner les données base64 directement à la fonction window.open(fileBase64Data). Mais je n'aime pas les données complètes définies dans l'URL.

Peut-être que ceci est un problème de sécurité avec Chrome bloquant l’ouverture des blobs?

Answer 1

La cause est probablement l'extension adblock (j'ai eu exactement le même problème).

Answer 2

Vous devez ouvrir une nouvelle fenêtre avant de placer l'URL blob dans la fenêtre:

let newWindow = window.open('/')

Vous pouvez aussi utiliser une autre page comme /loading, avec indicateur de chargement.

Ensuite, vous devez attendre le chargement de newWindow, et vous pouvez indiquer l’URL de votre fichier blob dans cette fenêtre:

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

L'extension Adblock ne le bloque pas.

Je l'utilise avec AJAX et des générateurs ES comme ceci:

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 3

Contourner le chemin pour contourner 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

Answer 4

Salaam

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

Les blobs ne sont pas bloqués par chrome mais sont bloqués par l'extension AdBlock

• Pause sur ce site
• Ne courez pas sur les pages de ce site
• Ou désactiver ou supprimer l'extension AdBlock