Skip to content

@page size did not work on raw-html #718

@AdityaR-AI

Description

@AdityaR-AI

although other style work, but the @page style did not work, i am trying to customize 50mm x 70mm papper it but its keep giving me default page sizze wich is A4 papper

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PrintJS</title>
</head>
<body>

    <button onclick="printHtmlCustomStyle()">Cetak PDF</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/print-js/1.6.0/print.min.js"></script>
<script>
    function printHtmlCustomStyle() {
        const content = `
            <div class="page">
                <h1>Page 1</h1>
            </div>
            <div class="page">
                <h1>Page 2</h1>
            </div>
        `;

        const style = `
            @page { 
                size: 50mm 70mm; 
                margin: 0; 
            } 
            @media print { 
                .page { 
                    width: 50mm; 
                    height: 70mm; 
                    page-break-after: always; 
                    border: 1px solid black; 
                    display: flex; 
                    justify-content: center; 
                    align-items: center;
                    text-align: center;
                    font-family: Arial, sans-serif;
                    color: blue;
                }
            }
        `;

        printJS({
            printable: content,
            type: 'raw-html',
            style: style,
            scanStyles: false
        });
    }
</script>


</body>
</html>
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions