Ich möchte das Leinwandbild direkt an den Standarddrucker senden / drucken. Das bedeutet schnelles Drucken.

Jeder kann einen Hinweis geben.

Javascript oder jQuery.

11
Derin 10 Okt. 2012 im 03:41

3 Antworten

Beste Antwort

Ich habe viel gesucht und eine Lösung gefunden, die perfekt funktioniert :) Verwendetes Onclick -Ereignis

function printCanvas()  
{  
    var dataUrl = document.getElementById('anycanvas').toDataURL(); //attempt to save base64 string to server using this var  
    var windowContent = '<!DOCTYPE html>';
    windowContent += '<html>'
    windowContent += '<head><title>Print canvas</title></head>';
    windowContent += '<body>'
    windowContent += '<img src="' + dataUrl + '">';
    windowContent += '</body>';
    windowContent += '</html>';
    var printWin = window.open('','','width=340,height=260');
    printWin.document.open();
    printWin.document.write(windowContent);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
}
27
Raza 12 Juni 2013 im 08:32

Ich habe dies schnell gegoogelt und diesen Link gefunden. Es gibt ein kurzes Tutorial, wie es geht, aber im Wesentlichen erhalten Sie eine Referenz-URL mit: toDataURL() und erstellen dann ein IMG mit der gleichen Größe, wobei Sie dessen src der URL zuweisen.

Schritt für Schritt erfahren Sie, was in Ihrem HTML- und CSS-Code zu tun ist. Schauen Sie sich also einfach die rel link wenn du nicht verstehst was ich gesagt habe.

Hinweis: Ich nahm an, dass Sie Probleme mit der Interaktion mit der zu druckenden Zeichenfläche hatten. Wenn Sie jedoch Probleme mit dem Druckertreiber haben, ist dies für Sie wahrscheinlich nicht von Nutzen.

0
Tom Prats 10 Okt. 2012 im 00:08

Ich stellte fest, dass die Leinwand beim ersten Drucken leer war. Ich habe einen Ereignis-Listener hinzugefügt, um zu warten, bis das Bild / Dokument geladen ist. Jetzt kann die Leinwand jedes Mal gedruckt werden. Hier ist der Code, der für mich funktioniert:

const dataUrl = document.getElementById('the-pdf-canvas').toDataURL(); 

let windowContent = '<!DOCTYPE html>';
windowContent += '<html>';
windowContent += '<head><title>Print canvas</title></head>';
windowContent += '<body>';
windowContent += '<img src="' + dataUrl + '">';
windowContent += '</body>';
windowContent += '</html>';

const printWin = window.open('', '', 'width=' + screen.availWidth + ',height=' + screen.availHeight);
printWin.document.open();
printWin.document.write(windowContent); 

printWin.document.addEventListener('load', function() {
    printWin.focus();
    printWin.print();
    printWin.document.close();
    printWin.close();            
}, true);
17
Martin McCaulley 18 Mai 2017 im 23:34