How To Print Webpage

General
1

Hi there,
I would like to print a page or create a pdf (print to pdf).
This is a brand new topic for me and I am a little overwhelmed.
I was able to create some local html tests but was not able to apply them to Cwicly.

Can anyone give me a hint in the right direction or does Cwicly already have a solution that I’ve missed?

2

– ChatGPT–
Tested and working

< button id=“printButton”>Print Page </ button>

// Function to print the page
function printPage() {
window.print();
}

// Attach the printPage function to the button's click event
var printButton = document.getElementById("printButton");
printButton.addEventListener("click", printPage);
1 Like
3

I think the most straight-forward solution without using custom code, is something like this:

image
image337×539 10.8 KB

You could also go the custom code route via code block or click interaction, as @kane already pointed out correctly.

5 Likes
4

Thank you for your solutions @kane and @Marius.
Both solutions worked like a charm.

Previously, I tried setting up the window.print(); command in the interactions section. But I seem to have missed something. Would this also be a possibility?

grafik

If I only want to print a specific area, would it be correct to create custom css like this?

@media print {
  body * {
    display: none;
  }
  .div-print-area {
    display: block;
  }
}

I could only remove all the content or nothing at all :thinking:

5

As mentioned above, this should also be possible via click interaction → custom function.
Did you make sure to toggle your ID?

1 Like
6

Working now :grimacing:
Didn’t make that error for the first time :face_exhaling:
Thank you a lot @Marius was doubting my sanity again :sweat_smile:

1 Like