webentwicklung-frage-antwort-db.com.de

Öffnen Sie die BLOB-Objekt-URL in Chrome

Ich möchte einen PDF in einem neuen Tab im chrome) Browser (Chrome 56.0.2924.87, Ubuntu 14.04) mit window.open(fileObjectURL) in Javascript öffnen Ich erstelle den Blob aus Base64-codierten Daten und erstelle eine objectURL wie folgt:

const fileObjectURL = URL.createObjectURL(fileBlob); 

Es funktioniert gut in den neuesten Firefox-Browser. Aber in Chrome Ich kann sehen, dass der neue Tab geöffnet und dann sofort geschlossen wird. So bekomme ich keinen Fehler in der Konsole usw. Nur so funktioniert es in Chrome soll nun die base64-Daten direkt an die window.open(fileBase64Data) -Funktion übergeben. Ich mag es jedoch nicht, wenn die vollständigen Daten in der URL festgelegt werden.

Vielleicht ist dies ein Sicherheitsproblem, da Chrome das Öffnen von Blobs blockiert?

25
Michbeckable

Die Ursache ist wahrscheinlich Adblock-Erweiterung (ich hatte genau das gleiche Problem).

68
bol89

Sie müssen ein neues Fenster öffnen, bevor Sie die Blob-URL in das Fenster einfügen:

let newWindow = window.open('/')

Sie können auch eine andere Seite wie /loading, mit Ladeanzeige.

Dann müssen Sie warten, bis newWindow geladen ist, und Sie können die URL Ihrer Blob-Datei in diesem Fenster verschieben:

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

Adblock-Erweiterung blockiere sie nicht.

Ich benutze es mit AJAX und ES-Generatoren wie folgt:

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

Umgehen Sie den Weg, um den Adblocker zu umgehen.

kaffeeskript & Abfrage

$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
1
Youn Oh

Salaam

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

Blobs werden nicht von chrome blockiert, sondern von der AdBlock-Erweiterung. Entweder:

  • Pause auf dieser Seite
  • Laufen Sie nicht auf Seiten dieser Site
  • Oder Deaktivieren oder Entfernen der AdBlock-Erweiterung

Don't run on pages on this site

0
Ali Jamal