Question

我有一个HTML发票模板，我想用自定义尺寸（例如80mm和297mm）打印此模板（WHOLE PAGE）。我尝试了这段代码：

@media print {
    @page {
      size: 80mm 297mm;
      margin: 0;
    }
}

但是它不起作用。如何打印具有自定义尺寸的页面？

Answer 1

您可以使用此JS函数，该函数允许您以给定的大小打印内容，可以通过触发事件来调用此函数

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()

}

您可以用div用id="main-page"包裹整个页面，并在document.getElementById('main-page')内使用<div class='to-print'></div>

Answer 2

CSS解决方案

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

如何打印自定义尺寸的网页？

2 个答案: