I have an HTML invoice template and I want to print this template (WHOLE PAGE) with custom sizes like 80mm and 297mm. I tried this code:
@media print {
@page {
size: 80mm 297mm;
margin: 0;
}
}
but it's not working. How can I print a page with custom sizes?
I have an HTML invoice template and I want to print this template (WHOLE PAGE) with custom sizes like 80mm and 297mm. I tried this code:
@media print {
@page {
size: 80mm 297mm;
margin: 0;
}
}
but it's not working. How can I print a page with custom sizes?
Share Improve this question edited Apr 8, 2021 at 14:28 Boussadjra Brahim 1 asked Sep 1, 2018 at 11:45 Mehmet Ali KuşMehmet Ali Kuş 791 silver badge8 bronze badges 4- what do you want to print exactly table or another thing? – Boussadjra Brahim Commented Sep 1, 2018 at 11:51
- 1 table. but i dont think its important – Mehmet Ali Kuş Commented Sep 1, 2018 at 12:03
- 2 could you provide some code to be more clear ? – Boussadjra Brahim Commented Sep 1, 2018 at 12:58
- bro i don't think you understand. I have a html invoice template. Think a page only content is a table. i want to print whole page and i am okey with it. But my problem is paper size. I want to print this page with invoice printer and this invoice printer sizes 8.5cm width X auto height. When i print the page, its show me full width a4 sizes content – Mehmet Ali Kuş Commented Sep 1, 2018 at 14:49
2 Answers
Reset to default 4You could use this JS function that allows you to print your content with the given size, you could call this function by firing an event
function print() {
var yourDOCTYPE = "<!DOCTYPE html>";
var printPreview = window.open('', 'print_preview');
var printDocument = printPreview.document;
printDocument.open();
var head =
"<head>" +
"<style> .to-print{height:279mm; width:80mm; } </style>" +
"</head>";
printDocument.write(yourDOCTYPE +
"<html>" +
head +
"<body>" +
"<div class='to-print'>" +
"<!-- your content to print can be put here or you can simply use document.getElementById('id-content-toprint')-->"+
"</div>"+
"</body>" +
"</html>");
printPreview.print();
printPreview.close()
}you can wrap your whole page by a div with id="main-page" and use document.getElementById('main-page') inside <div class='to-print'></div>
CSS Solution :
.printableArea {
width: 8.5cm; // !important
height:100%; // !important
}
@page {
size: 8cm auto; //
width: 8cm; //
height: 100%; //
margin: 0;
margin-left: 5px !important; // this is for me.
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744188349a4562314.html
评论列表（0条）