Ich möchte das Leinwandbild direkt an den Standarddrucker senden / drucken. Das bedeutet schnelles Drucken.
Jeder kann einen Hinweis geben.
Javascript oder jQuery.
3 Antworten
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();
}
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.
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);