wake-up-neo.com

Fehler: Ressource wird als Dokument interpretiert, aber mit dem MIME-Typ application/pdf übertragen

Ich sende einen PDF - Stream von meinem Server an den Client und zeige dann diesen PDF in einem <object>-Tag im Client an. Hier ist mein Code:

server.js 

router.get('/pdf', function * () {
  var stream = getMyFileStream();
  this.set('Content-Type', 'application/pdf');
  this.response.body = stream;
});

client.js 

var objectElement = document.querySelector('object');

fetch('/pdf', request)
  .then(res => res.blob())
  .then(blob => URL.createObjectURL(blob))
  .then(url => {
    objectElement.setAttribute('data', url)
    objectElement.setAttribute('type', 'application/pdf')
  })

Dieser Code scheint korrekt zu funktionieren, jedoch erhalte ich in meiner Konsole die folgende Warnung:

Ressource wird als Dokument interpretiert, jedoch mit dem MIME-Typ application/pdf übertragen

Warum sollte meine Ressource text/html sein? Wenn ich meinen Content-Type-Header in text/html ändere, verschwindet die Warnung, aber es wird offensichtlich ein Rendering-Problem der PDF-Datei angezeigt. Jede Hilfe wäre dankbar.

javascriptajaxpdfecmascript-6mime-types
7
saadq

In Ihrer Abrufanweisung müssen Sie einen Headertyp festlegen, da der Standardwert document ist. Da Sie den übereinstimmenden Inhalt nicht angegeben haben, informiert Sie der Browser, dass ein Problem auftritt.

// to stop browser complaining use a request object to specify header
var request = new Request('/pdf', {
    headers: new Headers({
        'Content-Type': 'application/pdf'
    })
});

fetch(request)
.then(function() { /* handle response */ });
...

Hinweis: Dies ist aus meiner eigenen Auswertung der Abruf-API. Ich habe es noch nicht im Zorn benutzt, also ist es nicht getestet worden. Ich fand diese Site nützlich https://davidwalsh.name/fetch .

Lass mich wissen, wie es dir geht.

3
Vanquished Wombat

Wahrscheinlich liegt dies daran, dass es eine Weiterleitung von/pdf gibt und/oder keine Dateierweiterung vorliegt. 

Fügen Sie diesen zusätzlichen Header hinzu: 

this.set('Content-Disposition', 'attachment; filename=results.pdf');
1
K48