Schnelldruck HTML5-Leinwand

Lesezeit: 4 Minuten

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

Jeder kann einen Tipp geben.

Javascript oder jQuery.

Womit hast du Probleme? Drucken Sie das Bild oder erhalten Sie es von der Leinwand? Oder beides? Bitte sei spezifischer. Außerdem, was hast du bisher probiert?

– Felix Klinge

9. Oktober 2012 um 23:43 Uhr
toDataURL(), geben Sie uns die Bilddaten von der Leinwand. Ich möchte es direkt an die Druckerei schicken.

– Derin

15. Oktober 2012 um 22:22 Uhr

Ich habe viel gesucht und eine Lösung gefunden, die perfekt funktioniert 🙂 Gebraucht anklicken Veranstaltung

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="'%20+%20dataUrl%20+%20'">';
    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();
}

Es funktioniert nicht für mich. Es gibt mir ein Druckdialogfeld, anstatt still auf dem Standarddrucker zu drucken

– daehaai

3. November 2014 um 14:21 Uhr
@PreyashDesai Wenn ich mich richtig erinnere, wird beim Drucken mit Javascript der Druckdialog immer vor dem Drucken angezeigt, um den Benutzer aufzufordern.

– Jo E.

14. November 2014 um 2:57 Uhr
sehr interessant! aber für meinen Code, wenn es zu printWin.document.open (); Ich erhalte diesen Fehler: Eigenschaft ‘open’ von undefined kann nicht gelesen werden. printWin.document ist undefiniert

– Best

8. Juni 2016 um 18:22 Uhr
Das ist, was ich brauche, aber Vorsicht! Meine Seite hat ein sehr langsam ladendes Bild. printWin.print() kann aufgerufen werden Vor die Seite wurde geladen. Fügen Sie besser ein wenig Javascript hinzu head der erstellten Seite: window.onload = function () { window.print(); window.close();} und lassen Sie die letzten beiden Anweisungen in diesem Beispiel weg.

– Auspex

28. September 2017 um 14:02 Uhr
diese Lösung funktioniert nicht. öffnet sich schnell ein Popup und das war’s.

– Sebastian Paduano

20. September 2020 um 18:29 Uhr

Ich stellte fest, dass die Leinwand beim ersten Drucken leer war. Ich habe einen Ereignis-Listener hinzugefügt, der wartet, bis das Bild/Dokument geladen ist. Jetzt ist die Leinwand jederzeit druckbereit. 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="'%20+%20dataUrl%20+%20'">';
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);

Dies sollte die richtige Antwort für Chrome sein.

– sureshvv

23. Dezember 2020 um 17:05 Uhr
Bei mir passiert nichts. Der Druckdialog öffnet sich nie. Ich habe versucht, einen Haltepunkt in den Ladelistener zu setzen, aber er wird ihn nicht erreichen.

– Elizandro – SparcBR

14. Juli 2021 um 19:05 Uhr

Verwenden printJS und dieser eine Liner:

printJS({printable: document.querySelector("#your-canvas").toDataURL(), type: 'image', imageStyle: 'width:100%'});

Brillant. Es hat mich nur 3 Zeilen gekostet. Erstens für den Skriptimport, zweitens für den Stilimport mit CDN und dann ist der dritte Einzeiler in der Antwort enthalten. Gut gemacht. Ich habe hier und da so viele Antworten ohne Glück versucht, ungefähr 4 Stunden damit verbracht, einige individuellere Aufgaben zu diesem Thema zu erledigen, aber schließlich die richtige Antwort bekommen. Vielen Dank!

– xdevx32

8. Mai 2020 um 0:21 Uhr

Ich habe das schnell gegoogelt und das gefunden Verknüpfung. Es gibt ein kurzes Tutorial, wie es geht, aber im Wesentlichen erhalten Sie eine Referenz-URL mit: toDataURL() und erstellen Sie dann ein img mit der gleichen Größe und weisen Sie der URL dessen src zu.

Es gibt einen besseren Schritt für Schritt, was in Ihrem HTML und CSS zu tun ist, also schauen Sie sich einfach die an Verknüpfung falls du nicht verstehst was ich gesagt habe.

Hinweis: Ich bin davon ausgegangen, dass Sie Probleme mit der Interaktion mit der Leinwand zum Drucken haben, aber wenn Sie stattdessen Probleme mit dem Druckertreiber haben, ist dies wahrscheinlich nutzlos für Sie.

9938700cookie-checkSchnelldruck HTML5-Leinwand

#Abfrage #html #Javascript #Segeltuch