2017-10-05 4 views
1

J'ai un point de terminaison API qui sur un PUT sert un fichier PDF avec Content-Type "application/pdf" (vous pourriez demander "pourquoi un PUT et pas un GET?" Et la réponse à cela est "c'est compliqué et Je ne peux pas le changer ").PDF de PUT dans une nouvelle fenêtre via Blob URI

Je veux (côté client), demander ce PDF et afficher le résultat dans un appel window.open() (c'est à dire afficher le PDF dans une nouvelle fenêtre). Auparavant, j'ai utilisé un URI de données pour ce faire, à savoir:

window.open('data:application/pdf,<the data payload from the response>'); 

mais dans Chrome 60 cela ne fonctionne plus (vous ne pouvez pas utiliser un URI de données dans un window.open, voir https://bugs.chromium.org/p/chromium/issues/detail?id=751135).

J'ai changé le code côté client pour faire un fetch() du même point final, créer un blob de la réponse, appelez URL.createObjectURL() sur le blob pour obtenir une URL, et transmettre cette url à l'appel window.open(). J'ai-à-dire quelque chose comme:

fetch('http://somedomain.com/rest/getMyPdf', { 
    method: 'PUT', 
    ... some headers & the body ... 
}).then(function(response) { 
    return response.blob(); 
}).then(function(blob) { 
    window.open(URL.createObjectURL(blob)); 
}); 

Cela fonctionne dans Firefox (je reçois un PDF dans une nouvelle fenêtre), mais Chrome vous voyez juste ASCII brut du contenu PDF (c.-à-%PDF-1.3.....).

Je suppose qu'il s'agit d'une sorte de problème de type de contenu, c'est-à-dire que si je pouvais définir le type de contenu sur l'URL, alors Chrome interpréterait la réponse comme un PDF. Des suggestions sur la façon de faire cela?

+0

Merci! Ouais ça l'a fait (n'avait pas besoin du 'Uint8Array ', juste le résultat brut de' arrayBuffer'). Voulez-vous l'étoffer et l'ajouter comme réponse et je l'accepterai? –

Répondre

1

Essayez

var data = response.arraybuffer(); 

Ensuite, créez un Blob à partir de là with the right content type

var = new Blob(data, 'application/pdf');