Log in to AnswerLog in to Follow
Jone Berti
29Views
15Comments
Solved
Print out screen content on button click
Question
JavaScript
Reactive
Import/Export Data
PDF

Good Morning

Staff need help

Create a screen where you would like to print it by clicking a button. I researched but I couldn't find a way that I could develop, if someone can help I am grateful

follows the screen image to be printed

0
0
on 22th Mar

Hi @Jone Berti 

Check the oml if is that you need.

Regards

Gonçalo Almeida

See solution in context
PrintScreen.oml

0
0
on 24th Mar


Hello

I am grateful for the answer. 

When opening this giving error in the PrintScreen module

0
0
on 25th Mar

Replying to Jone Berti's comment on 25 Mar 2021 00:53:47

What is the error?

Can you take a screenshot of it, please

0
0
on 25th Mar

Replying to Goncalo Almeida's comment on 25 Mar 2021 01:00:28
Hello
copied and pasted only on one page

already updated the dependencies but stopped here in these errors


0
0
on 25th Mar
Nikhil Gaur
mvp_badge
MVP
Solution

Hi Jone,

For that you can use window.print() javascript action. Here is reference a https://www.w3schools.com/jsref/met_win_print.asp

Keep in mind that this will print complete screen so all the menu will also be visible. To avoid it you have two options:

  1. Create a separate layout in your application and use that for screen where you want the content to be printed.
  2. Use no print CSS styles for the which you want to skip printing (like menu in your case). Here is the refernece link https://stackoverflow.com/a/356123
See solution in context
0
0
on 24th Mar

Hi Jone,

Please check this post , it may help you,

https://www.outsystems.com/forums/discussion/35638/print-functionality-on-button-click/

Regards,

Komal

0
0
on 22th Mar
Thanks for the answer

but I can’t associate the dependencies because I’m in reactive mode.

this would serve me but I couldn't put your dependency on the reactive

https://www.outsystems.com/forge/component-overview/1414/simple-reports-pdf
0
0
on 23th Mar
Nikhil Gaur
mvp_badge
MVP

Hi Jone,

You can try this forge component for printing the screen content in reactive apps

https://www.outsystems.com/forge/component-overview/9761/reactive-print-pdf-button

1
0
on 23th Mar
Good Morning

this one also served me correctly both in the configuration and in the practicality of implementation

but the quality comes dull

I don't know if it's all the methods or just this one.
0
0
on 23th Mar
Guys what I managed to implement by the forge was only files that generates images from Html and passes to PDF, in other words, the quality is much lower

If anyone can help, I appreciate it.
0
0
on 24th Mar
Nikhil Gaur
mvp_badge
MVP
Solution

Hi Jone,

For that you can use window.print() javascript action. Here is reference a https://www.w3schools.com/jsref/met_win_print.asp

Keep in mind that this will print complete screen so all the menu will also be visible. To avoid it you have two options:

  1. Create a separate layout in your application and use that for screen where you want the content to be printed.
  2. Use no print CSS styles for the which you want to skip printing (like menu in your case). Here is the refernece link https://stackoverflow.com/a/356123
0
0
on 24th Mar

Hi @Jone Berti 

Check the oml if is that you need.

Regards

Gonçalo Almeida

PrintScreen.oml

0
0
on 24th Mar


Hello

I am grateful for the answer. 

When opening this giving error in the PrintScreen module

0
0
on 25th Mar

Replying to Jone Berti's comment on 25 Mar 2021 00:53:47

What is the error?

Can you take a screenshot of it, please

0
0
on 25th Mar

Replying to Goncalo Almeida's comment on 25 Mar 2021 01:00:28
Hello
copied and pasted only on one page

already updated the dependencies but stopped here in these errors


0
0
on 25th Mar

Try this one.

If still has an error, please go to the service center and take a screenshot from the error

Regards

Gonçalo Almeida

PrintScreenExt.oml

0
0
on 25th Mar
Hello Gonçalo almeida

This error that is showing up here for me when trying to run after published
0
0
on 25th Mar
PrintScreen.oml

0
0
on 25th Mar

That's right I'm looking for

Thank you so much

Do you know how to tell me how to delete the button print that appears?
0
0
on 25th Mar

Hi Jone.

If you check on the example on my link I added the possibility to not print some elements that are on the screen


For that, I created a CSS class no-print and applied it to the element.

Applied to the button as well. You can check on my link.

Regards

Gonçalo Almeida

0
0
on 26th Mar
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.