Is it possible in CSS to scale PDF to fit in printable area?

Question

I am trying to print a PDF file which has some text at the very top edge and bottom edge of a page. This text is being cut off when printing unless the Scale is changed to "Fit to printable area" in the printer settings. Is there any way we can adjust the page with some margins so the Scale does not have to be changed ?

I tried to add top and bottom margins but they dont take effect. Thank you for any suggestions!

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    
    <style type="text/css">

        @media print {

            @page {
                margin-top: 30px;
                margin-bottom: 30px;
            }
        }

    </style>

    <script>
        function print() {

            var Element = document.querySelector('input');

            const dataUrl = window.URL.createObjectURL(Element.files[0]);

            const pdfWindow = window.open(dataUrl);

            pdfWindow.print();
        }

    </script>
</head>
<body>
    <input type="file">
    <button onclick="print()">Print PDF</button>
</body>
</html>

Is it possible in CSS to scale PDF to fit in printable area?

0 Answers0