CODEWITHSUNDEEP
javascriptcsswebprintingfrontend
Mehmet Ali Kuş
Mehmet Ali Kuş

Reputation: 79

Vue.js - How can I print a web 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?

Upvotes: 1

Views: 8282

Answers (2)

Mehmet Ali Kuş
Mehmet Ali Kuş

Reputation: 79

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

Upvotes: 2

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 4

Related Questions