web-dev-qa-db-fra.com

Enregistrer la chaîne base64 sous PDF côté client avec JavaScript

Voici donc mon problème: j'ai un fichier pdf en tant que chaîne base64 que je reçois du serveur. Je voudrais utiliser cette chaîne pour afficher le PDF directement dans le navigateur ou lui donner une option "Enregistrer sous ..." en cliquant sur un lien. Voici le code que j'utilise :

<!doctype>
<html>
<head>
   <title>jsPDF</title>
   <script type="text/javascript" src="../libs/base64.js"></script>
   <script type="text/javascript" src="../libs/sprintf.js"></script>
   <script type="text/javascript" src="../jspdf.js"></script>

       <script type="text/javascript">

        function demo1() {
            jsPDF.init();
            jsPDF.addPage();
            jsPDF.text(20, 20, 'Hello world!');
            jsPDF.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');

            // Making Data URI
            var out = jsPDF.output();
            var url = 'data:application/pdf;base64,' + Base64.encode(out);

            document.location.href = url;
         }
    </script>
</head>
<body>

<a href="javascript:demo1()">Run Code</a>

</body>
</html>

Son fonctionne bien avec Chrome et Safari. Firefox reconnaît le pdf mais ne l'affiche pas car FF nécessite la présence d'extensions mais l'URI de données n'en a pas dans ce cas. La raison pour laquelle je suis insistant ici, si chrome et safari le font fonctionner, alors il doit y avoir une solution pour FF et IE

Je sais qu'il y a quelques questions pertinentes à ce sujet mais pas vraiment la question exacte et maintenant aussi un peu anciennes. Je sais qu'une solution de contournement consisterait à générer le fichier PDF côté serveur, mais j'aimerais le générer côté client.

Alors s'il vous plaît, les gens intelligents, est-ce possible grâce à des hacks ou des plugins de téléchargement JS supplémentaires?

javascriptinternet-explorerfirefoxpdfbase64
32
owsata

Vous pouvez créer une ancre comme celle montrée ci-dessous pour télécharger le base64 pdf:

<a download=pdfTitle href=pdfData title='Download pdf document' />

où pdfData est votre base64 pdf comme "données: application/pdf; base64, JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMgMCBSL0ZpbHRlci9GbGF0ZURlY29kZT4 + CnN0cmVhbQp4nO1cyY4ktxG911fUWUC3kjsTaBTQ1Ytg32QN4IPgk23JMDQ2LB/0 + 2YsZAQzmZk1PSPIEB ..."

20
Gabriel C

Vous devriez pouvoir télécharger le fichier en utilisant

window.open("data:application/pdf;base64," + Base64.encode(out));
19
Denys Séguret

Je sais que cette question est ancienne, mais je voulais aussi y parvenir et je l'ai rencontrée en regardant. Pour Internet Explorer, j'ai utilisé le code de ici pour enregistrer un Blob. Pour créer un blob à partir de la chaîne base64, il y a eu de nombreux résultats sur ce site, donc ce n'est pas mon code, je ne me souviens plus de la source spécifique:

function b64toBlob(b64Data, contentType) {
    contentType = contentType || '';
    var sliceSize = 512;
    b64Data = b64Data.replace(/^[^,]+,/, '');
    b64Data = b64Data.replace(/\s/g, '');
    var byteCharacters = window.atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.Push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;

Utilisation de l'économiseur de fichiers lié:

if (window.saveAs) { window.saveAs(blob, name); }
    else { navigator.saveBlob(blob, name); }
15
Ka0s