How to add Print button on a page?

My requirement is to trigger a print page option on a button click as we can do it using the key combination Ctrl+p. Please help.

1 Like

Hi,

Adding a print button is possible via custom Javascript and is very easy on DrapCode.

Below are the steps to do it:-

Step 1: Drop the Button component on the page

Screenshot 2022-04-07 at 12.48.34 PM


Step 2:: Change the type from Submit to Button


Step 3: Provide the Id to attribute the Button Component



Step 4: Go to the Page Settings > Advance > Javascript Code


Step 5: Add the Custom Javascript code in this Block
Please make sure to replace the button Id in this code correctly.

const printBtn = document.querySelector(’#print-button’);
$(printBtn).click(function() {
window.print();
});


Step 6: Click Update button
So that the changes get saved with the page.

Step 7: Open the page in the Preview or Published mode




Step 8: Click the Print Button
And you will see that it has opened a prompt asking you to Print the page or save it as PDF.

Hope this works :grinning:

1 Like

Awesome! Thank you. :slight_smile: