I’ve built a component that contains dynamic fields. It’s an invoice component that includes colors and similar styling. I’ve added this component to a page as a small preview, so its size on the page is not A4. The original design is based on A4 dimensions (794x1123 px), but on the page it’s scaled down to half size (397x561 px).
Now, I want to print this component as a full A4, exactly as designed (794x1123), regardless of how it’s scaled on screen.
How can I print a component and make sure everything is rendered correctly and at full size? I’ve tried using a print button and some JavaScript, but it doesn’t work – the printed invoice always comes out too small on paper.
Perhaps you could create a workflow and have a “custom JS“ action.
In that javascript action you do anything you want (you could also ask for help to the AI) and ask it to spit the html next so you can feed it to the “Print PDF“ action
Here’s an example of the code:
// Get the current page content
const pageContent = document.documentElement.outerHTML
// Create a clean version optimized for printing
const printContent = `
<!DOCTYPE html>
<html>
<head>
<title>Print Version</title>
<style>
@media print {
body {
margin: 20mm;
font-size: 12pt;
}
@page {
size: A4;
margin: 20mm;
}
}
</style>
</head>
<body>
${document.body.innerHTML}
</body>
</html>
`
return printContent
