web-dev-qa-db-fra.com

Comment afficher un flux PDF dans un navigateur en utilisant javascript

J'accède à un service Web WCF existant (qui renvoie un PDF sous forme de flux d'octets) en utilisant les méthodes ajax de jquery.

Une fois l'appel au service terminé, je me retrouve avec une variable javascript contenant un PDF (la variable contient les données binaires, en commençant par "% PDF-1.4 ...")).

J'aimerais afficher ceci PDF dans une nouvelle fenêtre de navigateur, mais j'ai du mal à y parvenir.

Mes recherches jusqu'à présent montrent que je pourrais être en mesure de réaliser ce que je veux en utilisant une donnée: uri, donc mon code qui est appelé lorsque l'appel ajax se termine est le suivant:

function GotPDF(data)
{
    // Here, data contains "%PDF-1.4 ..." etc.
    var datauri = 'data:application/pdf;base64,' + Base64.encode(data);
    var win = window.open("", "Your PDF", "width=1024,height=768,resizable=yes,scrollbars=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,copyhistory=no");
    win.document.location.href = datauri;
}

Cela provoque l'ouverture d'une nouvelle fenêtre de navigateur, mais le contenu est vide.

Fait intéressant, si je pointe mon navigateur (IE9) vers un fichier existant sur mon disque local en utilisant un fichier: uri, tel que file: // c: /tmp/example.pdf, alors j'obtiens le même résultat, c'est-à-dire un blanc fenêtre.

Existe-t-il un moyen d'afficher ces données PDF?

javascriptjquerypdfbrowser
19
Dave W

Le code que vous avez écrit n'affiche rien, ouvrez simplement une fenêtre vide (location.href est un hachage pour l'historique de navigation, pas le contenu de la page).

Pour afficher un PDF vous avez au moins les options suivantes:

× Incorporez la visionneuse PDF dans une balise embed ou object. Elle peut ne pas être aussi simple que vous pouvez l'imaginer, jetez un oeil à cet article pour un exemple de code. En bref, cela devrait être quelque chose comme ceci:

<object data="your_url_to_pdf" type="application/pdf">
    <embed src="your_url_to_pdf" type="application/pdf" />
</object>

C'est du code de base mais je suggère de suivre ce que je dis dans le post lié si vous avez besoin d'une compatibilité croisée plus élevée entre les navigateurs.

× Téléchargez le fichier sur l'ordinateur local (ajoutez simplement l'URL complète de votre méthode de service Web qui produit le fichier, n'oubliez pas d'ajouter la bonne Content-Disposition dans l'en-tête).

× Ouvrez le fichier dans une nouvelle fenêtre de navigateur. Créez une balise normala lorsque vous pointez vers un fichier PDF en ligne que vous souhaitez afficher dans une nouvelle fenêtre. Modifiez le href à javascript:functionName et dans cette fonction, produisez l'URI que vous utiliserez pour appeler la méthode du service Web.

Quoi que vous fassiez, n'oubliez pas de définir le type MIME approprié dans votre réponse.En outre, votre méthode ne doit pas renvoyer un flux d'octets (même s'il est codé) mais une réponse valide pour votre navigateur Web.

14
Adriano Repetti

Si vous utilisez <embed> ou <object> tag pour afficher un PDF (ou autres types de fichiers) en streaming depuis un serveur comme dans:

<object data="SomeServlet?do=get_doc&id=6" type="application/pdf" width="800" height="400">

assurez-vous que le serveur envoie le bon http content-disposition valeur, qui dans ce cas serait inline.

6
Morey