html - Bootstrap 打印 View

Question

我正在尝试打印一张我用 HTML 和 Bootstrap CSS 构建的发票。但是，当我尝试打印时，内容不是全宽的。我已将媒体从屏幕 更改为全部。

Web Page View:

Print View:

CSS

@media print {
  * {
    text-shadow: none !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-width:0 0px 0px 0 !important;
  }

HTML

<link rel="stylesheet" href="views/css/bootstrap.css" media="all">

Answer 1

我在我的一个应用程序中使用过，希望它能帮助你.. 尝试打印内容如下

HTML

<button class="btn btn-default" onclick="printContent('class or ID of your content')">Print Content</button>

脚本

function printContent(el){
        var restorepage = document.body.innerHTML;
        var printcontent = document.getElementById(el).innerHTML;
        document.body.innerHTML = printcontent;
        window.print();
        document.body.innerHTML = restorepage;
    }