Printing fabricjs canvas?

Question

I've been struggling for a few weeks on creating functionality to allow me to print my fabricjs canvas. I've tried the methods mentioned here without luck. I'm able to get to the print dialog, however, it's blank aside from the title and page info. Can anyone point me in the right direction?

I'm currently using:

// Trying to print
function printCanvas()  
{  
    var dataUrl = document.getElementById('c').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();
}

<button onclick="printCanvas()">Print</button>

score 5 · Accepted Answer · answered Nov 14 '17 at 05:27

5

You need to do the print operation after the content is loaded. The following code should work

function printCanvas() {
    var dataUrl = document.getElementById('c').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 + '" onload=window.print();window.close();>';
    windowContent += '</body>';
    windowContent += '</html>';
    var printWin = window.open('', '', 'width=340,height=260');
    printWin.document.open();
    printWin.document.write(windowContent);
}

answered Nov 14 '17 at 05:27

user700284

13,540
8
40
74

Do you know if it is possible to increase the size of the image that it captures from the DataURL? If you'd like I can open a new question. Thanks! – anonymoose Nov 14 '17 at 14:30
I couldn't tell – anonymoose Nov 15 '17 at 16:07
Tried to give you a solution in your other question.Let me know if that helps – user700284 Nov 16 '17 at 05:59
It did! Thank you kindly. :) – anonymoose Nov 18 '17 at 16:17
Very nice. Thank you for sharing. – user1204493 Jul 21 '21 at 21:39
@user700284 How to append multiple canvases and setting the page dimensions (pages to be printed) dynamically ? – emre-ozgun Oct 17 '22 at 14:56

Printing fabricjs canvas?

1 Answers1