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

Community Beginner ,
May 03, 2021 May 03, 2021

Copy link to clipboard

Copied

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

TOPICS
How to

Views

433

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 06, 2021 May 06, 2021

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

Hi, Rod!

 

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

 

Regards.

KC

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

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

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
16 hours ago 16 hours ago

Copy link to clipboard

Copied

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

Here is the link to the fla

Get Outlook for iOS

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines