it-swarm.com.de

Drucken PDF direkt aus JavaScript

Ich erstelle eine Liste von PDFs in HTML. In die Liste möchte ich einen Download-Link und einen Druckknopf/-link aufnehmen. Gibt es eine Möglichkeit, den Druckdialog für PDF direkt zu öffnen, ohne dass der Benutzer PDF sieht oder einen PDF - Viewer öffnet?

Einige Variationen des Herunterladens von PDF in einen verborgenen Iframe und das Auslösen des Druckens mit JavaScript?

70
Craig Celeste

Diese Frage zeigt einen Ansatz, der für Sie möglicherweise hilfreich ist: Stummdruck eines eingebetteten PDF

Es verwendet das <embed>-Tag, um die PDF in das Dokument einzubetten:

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

Dann rufen Sie in Javascript die .print()-Methode für das Element auf, wenn PDF geladen wird:

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();
    }
}

Sie können die Einbettung in einem versteckten Iframe platzieren und von dort aus drucken, um ein nahtloses Erlebnis zu bieten.

50
nullability

Hier ist eine Funktion zum Drucken eines PDF aus einem Iframe.

Sie müssen nur die URL von PDF an die Funktion übergeben. Es wird ein iframe erstellt und ein Ausdruck ausgelöst, sobald PDF geladen wird.

Beachten Sie, dass die Funktion den iframe nicht zerstört. Stattdessen wird es bei jedem Aufruf der Funktion wiederverwendet. Es ist schwer, den iframe zu zerstören, da er benötigt wird, bis der Druckvorgang abgeschlossen ist und die Druckmethode (soweit ich weiß) keine Rückrufunterstützung bietet.

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

Laden Sie die Print.js von http://printjs.crabbly.com/ herunter.

$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/

für eine Live-Demo http://mozilla.github.io/pdf.js/

das ist wahrscheinlich das, was Sie wollen, aber ich kann den Sinn nicht erkennen, da moderne Browser über eine solche Funktionalität verfügen. Außerdem wird sie auf Geräten mit niedrigem Stromverbrauch wie mobilen Geräten, die übrigens über ihre eigenen optimierten Plug-Ins und Apps verfügen, extrem langsam laufen .

11
user2311177

Ich habe diese Funktion verwendet, um den PDF-Stream vom Server herunterzuladen.

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

Browserübergreifende Lösung zum Drucken von pdf aus dem base64-String:

  • Chrome: Druckfenster wird geöffnet
  • FF: Neuer Tab mit PDF wird geöffnet
  • IE11: Öffnen/Speichern Die Eingabeaufforderung wird geöffnet

.

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 - Öffnen der BLOB-Datei in einem neuen Tab für IE11

Wenn Sie die base64-Zeichenfolge auf dem Server vorverarbeiten können, können Sie sie unter einer bestimmten URL anzeigen und den Link in printJS verwenden.

0
Papi