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>
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