web-dev-qa-db-fra.com

Comment intégrer un URI de données encodé en Base64 PDF) dans un attribut de données HTML 5 `<objet>`?

Ainsi, dans mon application, les utilisateurs ont la possibilité de télécharger un fichier sur un <input type = "file" id = "my-file"> (Entrée de fichier HTML 5). Je peux ensuite récupérer ce fichier en utilisant le Javascript suivant:

var files = $("#my-file").files;
var file = files[0];

Puis-je en quelque sorte utiliser ce var file comme data dans un <object> tag? Voici un exemple de balise d'objet où le PDF est saisi en frappant une URL et en contactant le serveur.

<object data="data/test.pdf" /*<-- I want the var file here */ type="application/pdf" width="300" height="200">
</object>

Comment puis-je accomplir cela? Veuillez noter que je dois prendre en charge Internet Explorer 11.

MISE À JOUR:

J'ai essayé quelque chose qui s'est finalement soldé par un échec. J'ai converti le PDF en un uri de données à l'aide de FileReader et l'ai ensuite utilisé dans l'attribut data du <object> tag, qui s'affiche parfaitement dans Chrome mais pas du tout dans Internet Explorer.

var files = $(e.currentTarget.files);
file = files[0];
var reader = new FileReader();
reader.onloadend = function() {
    var data = reader.result;
    console.log(data);
    $("#content").prepend('<object id="objPdf" data="'+data+'" type="application/pdf"></object>');
};
reader.readAsDataURL(file);

Où les données du lecteur apparaissent:

data:application/pdf;base64,JVBERi0xLjQKJe...

Voici la raison pour laquelle les PDF ne fonctionnent pas avec cette approche dans Internet Explorer (images uniquement) ... tellement triste :(

MISE À JOUR 2:

Essayé pdf.js avec un certain succès ... il affiche le PDF sur la page, bien qu'il soit incroyablement lent (5 secondes pour une seule page) dans Internet Explorer 11. Il n'affiche également qu'une seule page à la fois, tandis que le <object> tag affiche toutes les pages instantanément dans un joli conteneur déroulant. Bien qu'il s'agisse d'une option de repli extrême, je ne voudrais pas emprunter cette voie.

Quelqu'un a-t-il une autre idée de la façon dont je peux prévisualiser les PDF que l'utilisateur télécharge directement dans la page Web?

htmlpdfbase64data-uriobject-tag
14
twilco

Oui je l'ai fait travailler avec un fichier ...

HTML:

<object id="pdf" data="" type="application/pdf"></object>

Javascript (Jquery)

var fr = new FileReader();
fr.onload = function(evtLoaded) {
  $('#pdf').attr('data', evtLoaded.target.result );
};
fr.readAsDataURL(inFile);

Par rapport à votre approche, j'utilise différemment le rappel "J'ai fini de lire le fichier" en utilisant l'événement. Si j'ai bien compris: "loadend" sera toujours appelé, que la lecture réussisse ou échoue.

4
Dirk Schumacher