Question

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

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

Answer 2

大多数浏览器的打印都很棘手 - 问题在于取决于浏览器，默认纸张大小及其方向（纵向或横向）以及悉尼目前的潮流，页面将以72ppi，96ppi或144ppi打印。

在Bootstrap中，媒体查询建立像素宽度带...例如“xs”介于544px-767px之间，因此根据（打印的）页面宽度，您的网站在打印时可能会恢复为“xs”或“sm”宽度变体。

一种解决方案是创建@media print {}媒体查询，该查询会覆盖.container类和所有.col-*类。（是的......很多工作！）

还有一些插件CSS'...就像我的vinorodrigues/print-ready试图解释其中一些。 （请原谅自我促销，但C＆amp; P的代码太多了。）

Bootstrap打印视图

2 个答案: