• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

679

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 Expert ,
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

Votes

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

Votes

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 Expert ,
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

Votes

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

Votes

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 Expert ,
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

Votes

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

 

Votes

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 08, 2021 May 08, 2021

Copy link to clipboard

Copied

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

Here is the link to the fla

Get Outlook for iOS

Votes

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