Vue.js - 如何打印自定義尺寸的網頁？

Question

我有一個 HTML 發票模板，我想用 80 毫米和 297 毫米等自定義尺寸打印此模板（整頁）。 我試過這個代碼：

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

您可以用id="main-page"的div包裹整個頁面，並在<div class='to-print'></div>內使用document.getElementById('main-page')

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

Vue.js - 如何打印自定義尺寸的網頁？

問題描述

2 個解決方案

解決方案1
3 2018-09-01 14:48:48

解決方案2
1 已采納 2018-09-01 14:59:47

Vue.js - 如何打印自定義尺寸的網頁？

問題描述

2 個解決方案

解決方案1 3 2018-09-01 14:48:48

解決方案2 1 已采納 2018-09-01 14:59:47

解決方案1
3 2018-09-01 14:48:48

解決方案2
1 已采納 2018-09-01 14:59:47