Printing a canvas as a PDF (or otherwise) from a web page

[rodecss]

I have created some question generators for my Maths classes. Here is an example: https://mymathsroom.com/warmups/valueofdigit5qq/

These are done using Adobe Animate.

I would like to crreate an A4 size canvas with questions gneerated on it and be able to print it out for student to take away as a worksheet.

I was wondering if there is a way to print a canvas to a PDF or directly to a printer from a web page.

I was wondering if someone might be able to point me in the right direction to learn how to do this.

Thank you

[JoãoCésar]

Hi.

If you don't need a lot of customization, the easiest way is to invoke the print method to call the browser's print dialog.

Please let us know if this is what you want.

Regards,

JC

[rodecss]

Hi there JC,

I just tried that out and I am super happy! All I need to do now is to create my activity sheets in A4 size in animate and remove some of the buttons and it should look good. 

Just wondering, is there anyway you can remove the print button so that it does not actually appear on the printed copy?

Thanks heaps for your help - I am a very excited teacher.

Rod

[JoãoCésar]

That's great, Rod!

You can make use of the afterprint event and possibly the beforeprint event as well. Here is a sample:

var root = this;

root.setupPrint = function(e)
{
	root.yourPrintButton.visible = false;
};

root.print = function(e)
{
	window.print();
};

root.afterPrint = function(e)
{
    root.yourPrintButton.visible = true;
};

/* I'm using both mousedown and pressup events because if I use the same event for both, the print method it's called before the stage update */
root.yourPrintButton.on("mousedown", root.setupPrint);
root.yourPrintButton.on("pressup", root.print);
window.addEventListener("afterprint", root.afterPrint);

I hope it helps.

Regards,

JC

[rodecss]

Hi there JC,

I will show you where I am up to - here is a page that now prints at A4 size.

I have inserted the code you suggested and I must be close because the Print Button appears.

However, I think I may be inserting the code in the wrong position, because the Print Button still prints out.

I can get rid of it by customising the margins so that 2 pages print (the print button is on the second page so I just print the first page).

Can you tell me where I need to insert the code in the HTML? (As you can see, I am no expert! The help you have given me has been so good.)

Thanks

Rod

[JoãoCésar]

Hi, Rod!

Do you mind sharing your FLA so I can better understand what's going on?

Regards.

KC

[rodecss]

Hi KC,

I have attached the FLA. 

The main thing I am trying to do is print out activity sheets for my students in A4 formatting. So I set the canvas to be in the ratio of an A4 page and then try and print the canvas using the coding you shared with me.

Thanks again for taking the time to help me with this.

Rod

[rodecss]

https://1drv.ms/u/s!Ar2bQmcmm2aqguh0d-ErvTlVKB8sag

Here is the link to the fla

Get Outlook for iOS