I'm trying to make a custom print screen, but there's no way to pick up the values I want it to have for the preview.
<div id="elementToPrint">
<h1>TEST</h1>
<svg id="barcode"></svg>
JsBarcode("#barcode", "Hi world!");
var ifr = document.createElement('iframe');
ifr.style = 'size: auto; size: A5; margin: 25mm;'
document.body.appendChild(ifr);
$('#elementToPrint').clone().appendTo(ifr.contentDocument.body);
ifr.contentWindow.print();
ifr.parentElement.removeChild(ifr);
- Fiddle with working example as the one on the site doesn't work correctly with print: https://jsfiddle.net/Lytqsd2x/
The result of this is a generic browser screen and without borders or A5 size, I have also tried to use @media
but without success:
@media print {
@page {
size: auto;
size: A5;
margin: 25mm;
}
}
How can I configure this screen?
I don't quite understand the reason but as I have seen, the only way to be able to customize the print paper size is from the printer configuration, from Javascript you cannot designate sizes, I don't know if it is a security measure, since In several places I saw that from css it could be done, but when trying to reproduce those cases none of them came out satisfactorily, you cannot generate a custom print screen . But you can do it from the windows system by accessing:
Depending on the printer (in my case a Zebra) there you can modify the parameters of the paper.