2014-01-30 18 views
5

Ich habe ein Dokument mit pdf.js erstellt und es wird korrekt angezeigt. Ich habe keinen Druckknopf. Wie man die Taste hinzufügt, um Benutzern zu erlauben, es zu drucken? Ich habe Chrome verwendet.Wie pdf.js Dokument zu drucken?

+0

einmal angezeigt, Angebot Seite drucken - Einbetten in einen iframe, wenn das alles ist, was Sie drucken möchten. – dandavis

Antwort

7

Probieren Sie die Javascript-Funktion window.print();, die den Druckdialog öffnet.

Sie müssen eine Schaltfläche zu Ihrem HTML hinzufügen, die den Befehl auslöst - es ist nicht innerhalb der PDF möglich.

Aus diesem Grund erhalten Sie einen iFrame brauchen, und so etwas wie folgt verwenden:

function printIt() { 
    var wnd = window.open('http://your-pdf-url'); 
    wnd.print(); 
} 

<input type="button" value="Print" onclick=printIt()> 

window.print() würde nicht funktionieren, weil es auch die umgebende HTML drucken.

EDIT:

Von Ihrem Kommentar, ich weiß jetzt, dass Sie den Inhalt einer Leinwand-Element drucken möchten - was viel einfacher ist.

Sie benötigen keinen iframe, Sie können die Schaltfläche auf dieselbe Seite setzen und window.print(); verwenden.

Um nur die Leinwand-Element zu drucken, und die Umgebung (wie die Taste) zu verstecken, können Sie CSS-Syntax wie folgt verwenden:

@media print 
{  
    .no-print, .no-print * 
    { 
     display: none !important; 
    } 
} 

@media print gibt CSS-Code, der nur gilt für eine Webseite, wenn sie gedruckt wird. Wenn Sie nun die Klasse .no-print zu allem außer dem Canvas-Element zuordnen, wird nur Ihre PDF-Datei gedruckt.

Sie auch diese CSS-Code verwenden können, wenn es einfacher ist:

@media print 
{  
    * 
    { 
     display: none; 
    } 
    canvas 
    { 
     display: inline; 
    } 
} 
+0

Danke, aber das Problem ist, dass ich keine URL für das PDF habe. Ich habe die base64-Darstellung von pdf vom Server bekommen, sie in ein Array konvertiert und das pdf.js-Dokument daraus erstellt. – Dejo

+1

@Dejo: Sie greifen auf Ihre pdf über den Browser zu - so muss es eine URL geben, die beginnt, die pdf zu generieren. Wenn Sie es in einen iframe einfügen, können Sie auch 'var wnd = document.getElementById (" myframe ") verwenden. ContentWindow;' – maja

+0

Thx, aber es wäre nicht so einfach, weil es im Canvas-Element gerendert wird. – Dejo

-1

Ich habe so lange nach einer Lösung für diese suchen und dann landete ich auf dieses Plugin JS:

http://printjs.crabbly.com/

Es funktioniert wie ein Charme!

0

Wenn Sie alles in der Linie und Chaos mit jquery so wenig wie möglich halten möchten, können Sie versuchen, etwas wie:

<a href="#PATH_TO_PDF.pdf" target="_blank" onclick="window.print()"> print PDF </a>