web-dev-qa-db-fra.com

Impression PDF directement depuis JavaScript

Je construis une liste de PDF en HTML. Dans la liste, j'aimerais inclure un lien de téléchargement et un bouton/lien d'impression. Existe-t-il un moyen d'ouvrir directement la boîte de dialogue Imprimer du PDF sans que l'utilisateur voie le PDF ou n'ouvre un visualiseur PDF?

Une variante du téléchargement du fichier PDF dans une iframe masquée et de l’impression en JavaScript?

javascriptpdf
70
Craig Celeste

Cette question illustre une approche qui pourrait vous être utile: Imprimer en mode silencieux un fichier PDF

Il utilise la balise <embed> pour incorporer le PDF dans le document:

<embed
    type="application/pdf"
    src="path_to_pdf_document.pdf"
    id="pdfDocument"
    width="100%"
    height="100%" />

Ensuite, vous appelez la méthode .print() sur l'élément en Javascript lorsque le PDF est chargé:

function printDocument(documentId) {
    var doc = document.getElementById(documentId);

    //Wait until PDF is ready to print    
    if (typeof doc.print === 'undefined') {    
        setTimeout(function(){printDocument(documentId);}, 1000);
    } else {
        doc.print();
    }
}

Vous pouvez placer l’incorporation dans un iframe caché et l’imprimer à partir de là, pour une expérience continue.

50
nullability

Voici une fonction pour imprimer un PDF à partir d'un iframe.

Il vous suffit de transmettre l'URL du PDF à la fonction. Il créera une iframe et déclenchera une impression lorsque le PDF sera chargé.

Notez que la fonction ne détruit pas l'iframe. Au lieu de cela, il le réutilise chaque fois que la fonction est appelée. Il est difficile de détruire l’iframe car il est nécessaire jusqu’à ce que l’impression soit terminée, et la méthode d’impression ne prend pas en charge les rappels (à ma connaissance).

printPdf = function (url) {
  var iframe = this._printIframe;
  if (!this._printIframe) {
    iframe = this._printIframe = document.createElement('iframe');
    document.body.appendChild(iframe);

    iframe.style.display = 'none';
    iframe.onload = function() {
      setTimeout(function() {
        iframe.focus();
        iframe.contentWindow.print();
      }, 1);
    };
  }

  iframe.src = url;
}
24
Nicolas BADIA

Téléchargez le fichier Print.js à partir de http://printjs.crabbly.com/

$http({
    url: "",
    method: "GET",
    headers: {
        "Content-type": "application/pdf"
    },
    responseType: "arraybuffer"
}).success(function (data, status, headers, config) {
    var pdfFile = new Blob([data], {
        type: "application/pdf"
    });
    var pdfUrl = URL.createObjectURL(pdfFile);
    //window.open(pdfUrl);
    printJS(pdfUrl);
    //var printwWindow = $window.open(pdfUrl);
    //printwWindow.print();
}).error(function (data, status, headers, config) {
    alert("Sorry, something went wrong")
});
17
user1892203

https://github.com/mozilla/pdf.js/

pour une démonstration en direct http://mozilla.github.io/pdf.js/

c'est probablement ce que vous voulez, mais je ne vois pas l'intérêt de cela, car les navigateurs modernes incluent de telles fonctionnalités. De plus, il fonctionnera très lentement sur les appareils de faible puissance, comme les appareils mobiles, qui ont d'ailleurs leurs propres plugins et applications optimisés. .

11
user2311177

J'ai utilisé cette fonction pour télécharger un flux pdf à partir du serveur.

function printPdf(url) {
        var iframe = document.createElement('iframe');
        // iframe.id = 'pdfIframe'
        iframe.className='pdfIframe'
        document.body.appendChild(iframe);
        iframe.style.display = 'none';
        iframe.onload = function () {
            setTimeout(function () {
                iframe.focus();
                iframe.contentWindow.print();
                URL.revokeObjectURL(url)
                // document.body.removeChild(iframe)
            }, 1);
        };
        iframe.src = url;
        // URL.revokeObjectURL(url)
    }
1
Adnan shah

Solution de navigateur croisé pour l'impression de pdf à partir d'une chaîne base64:

  • Chrome: la fenêtre d'impression est ouverte
  • FF: nouvel onglet avec pdf est ouvert
  • IE11: l'invite open/save est ouverte

.

const blobPdfFromBase64String = base64String => {
   const byteArray = Uint8Array.from(
     atob(base64String)
       .split('')
       .map(char => char.charCodeAt(0))
   );
  return new Blob([byteArray], { type: 'application/pdf' });
};

const isIE11 = !!(window.navigator && window.navigator.msSaveOrOpenBlob); // or however you want to check it

const printPDF = blob => {
   try {
     isIE11
       ? window.navigator.msSaveOrOpenBlob(blob, 'documents.pdf')
       : printJS(URL.createObjectURL(blob)); // http://printjs.crabbly.com/
   } catch (e) {
     throw PDFError;
   }
};

printPDF(blobPdfFromBase64String(base64String))

BONUS - Ouvrir un fichier blob dans un nouvel onglet pour IE11

Si vous pouvez effectuer un traitement préalable de la chaîne base64 sur le serveur, vous pouvez l'exposer sous une URL et utiliser le lien dans printJS :)

0
Papi