Chrome blockiert ein Blob-Objekt, wenn es als PDF-Download

Question

Ich habe ein kleines Stück Skript erstellt, das eine API ruft ein PDF zu erhalten und sendet die response als Arraybuffer.

diese Verwendung erstelle ich ein neues Blob und den Typ als ‚application/pdf‘

Um dies ich ein Ankerelement erstellen herunterladen zu zwingen, den Klecks geben und klicken Sie darauf.

Dies funktioniert lokal feines und auf anderen Browsern auf meinem Test-Server, sondern auf Chrome Ich konnte nicht bekommen - keine Datei im Download-bar.

Das PDF-Format ist auf jeden Fall als ich die URL die API in ein Register einfügen kann und sie und die Antwort von dem ursprünglichen API-Aufruf sehen ist mit dem Blob weitergegeben.

Beispielcode

var fileName = 'dummyFilename-' + offerId + '.pdf'; 
var blob = new window.Blob([resData], { type: 'application/pdf' }); 

var anchorElement = document.createElement('a'); 
var url = window.URL.createObjectURL(blob); 

document.body.appendChild(anchorElement); 
anchorElement.id = 'anchorElement'; 
anchorElement.hidden = 'true'; 
anchorElement.href = url; 

if (typeof anchorElement.download !== 'undefined') { 
    anchorElement.download = fileName; 
} else { 
    anchorElement.target = '_blank'; 
} 

anchorElement.click(); 

Answer 1

Erzwingen dies ist immer ein bisschen hacky ...:

Wenn das HTML-Element, das Sie diese Funktion ausführen klicken auf einen Link, können Sie versuchen, hinzufügen, um eine download Attribut:

<a href="path/to/your/file.pdf" download>Download PDF</a> 

Sie können es umbenennen, wenn Sie wollen:

<a href="path/to/your/file.pdf" download="downloaded-pdf-name.pdf">Download PDF</a> 

Wenn Sie diese Lösung verwenden, dass die Arbeit in anderen Browsern zu machen, wo die download Attribut nicht, Ihre Click-Ereignishandler funktionieren wie folgt aussehen sollte:

document.getElementById('#download-pdf').onclick = function (event) { 
    if (!"download" in document.createElement("a")) { 
     // Download is NOT supported, the browser is probably not Chrome 
     // You don't want the native behaviour, which will probably open 
     // the PDF in another tab, so: 
     event.preventDefault(); 

     // TODO: Adapt your code to execute from here... 
    } 
} 

jedoch, dass download Check kann funktioniert nicht in Firefox. Schauen Sie sich die Kommentare in der Antwort hier: How to detect support for the HTML5 "download" attribute?

Wenn Sie diese Option haben, ich würde Ihnen raten Content-Disposition = 'attachment; filename=downloaded-pdf-name.pdf' in der HTTP-Antwort-Header einzustellen. Überprüfen Sie here, um spezifische Möglichkeiten zu sehen, dies in verschiedenen Backends zu tun.

Answer 2

Haben Sie versucht das? (ohne ein Element zu erstellen) ... Ich hoffe es hilft

var fileName = 'dummyFilename-' + offerId + '.pdf'; 
var blob = new window.Blob([resData], { type: 'application/pdf' }); 
// Parse blob object to base64 to prevent chrome blocking: 
var reader = new FileReader(); 
reader.readAsDataURL(blob); 
reader.onloadend = function() { 
    base64data = reader.result; 
    // For IE: 
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { 
     window.navigator.msSaveOrOpenBlob(base64data); 
    } // For webkit 
    else { 
     var objectUrl = URL.createObjectURL(base64data); 
     window.open(objectUrl); 
    } 
}