javascript - 在应用了所有 css 的 HTML 中打印一个 div

Question

我正在用 asp.net MVC 做一个元素。我想打印一个应用了所有 css 样式的 div。该 div 中可能包含一个或多个 div。我尝试了很多 javascript 打印代码，但每一个都失败了。我要打印的页面如下所示: Click here to view page .我只想打印包含详细信息的输入区域下方的区域。但问题是，当我使用 javascript 打印方法时，我的 TableView 突然消失了。这是我得到的打印预览:Click here to view the print preview page .我尝试了多种方法，但都失败了。请帮忙。提前致谢。下面是我的前端代码文件

saleInvoice.cshtml

<script>
 function refresher() {
        $('#si, .si').load('/TallySet/cart');

    };

    function printDiv(divID) {
        debugger;
        var printContents = document.getElementById(divID).innerHTML;
        var originalContents = document.body.innerHTML;

        document.body.innerHTML = printContents;

        window.print();

        document.body.innerHTML = originalContents;
    };
</script>
<div class="col-lg-12 popblk">
    <p>New Sales Invoice</p>
</div>

<div class="col-lg-12" style="background-color:white">
    <div class="row">
        <div class="col-lg-2">
            <p>Customer : </p>
        </div>

        <div class="col-lg-4">
            @Html.DropDownList("customers")
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
            @Html.DropDownList("items")
        </div>
        <div class="col-lg-4">
            @Html.TextBoxFor(x => x.quantity)
        </div>
        <div class="col-lg-2">
            <button value="Add to cart" onclick="addToCart()">Add to cart</button>
        </div>
        <div class="col-lg-2">
            <button value="Refresh" onclick="printDiv('si')">Refresh Cart</button>
        </div>
    </div>

    <div class="row" id="si" style="margin-left:50px;">
        @{Html.RenderAction("cart", "TallySet");}
    </div>

    <div class="row" style="background-image:url('../../viewData/sale_footer.png')">

    </div>
    <button class="rButtonCancel" value="X" data-dismiss="modal" onclick="listVoider()">X</button>
</div>

cart.cshtml

@model IEnumerable<Fast_Tally_Accounter.Models.salesCart>
<img src="~/viewData/sale_head.png" />
@if(Model!=null)
{
    foreach(var v in Model)
    {
        <div class="row" style="background-image:url('../../viewData/sale_row.png'); background-repeat:no-repeat;margin-left:0px;margin-bottom:0px">
            <div class="col-lg-2">
                <p>@v.quantity KG</p>
            </div>

            <div class="col-lg-4">
                <p>@v.itemName</p>
            </div>

            <div class="col-lg-1">
                <p>@v.itemPrice</p>
            </div>

            <div class="col-lg-1">
                <p>@v.itemTotal</p>
            </div>
        </div>
    }
}

<div class="row" style="background-image:url('../../viewData/sale_footer.png'); background-repeat:no-repeat; margin-left:0px; height:120px">

    <div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
        <p>@ViewBag.dt</p>
    </div>

    <div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
        <p>Daniyal humayun</p>
    </div>

    <div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:10px; margin-right:0px" id="myRow">
        <p>@ViewBag.qt</p>
    </div>

    <div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:0px; margin-right:0px" id="myRow">
        <p>@ViewBag.pr</p>
    </div>

</div>

Answer 1

这里有很多问题。首先也是最重要的。您实际上并没有使用表格。相反，您正在使用 Bootstrap 的网格样式来制作表格的近似值。使用实际的 HTML 表格是一个更好的主意，不仅因为它提供了一致性，而且还为了可访问性。

其次，您的“表格”的“边框”是通过背景图像应用的。虽然我认为 Chrome 实际上为用户提供了打印背景图像的选项，但现在它不是默认设置，其他浏览器在打印时会完全忽略背景图像。总之，这种方法注定要失败。

第三，在打印时，您实际上是在获取此 div 的内容并用它替换整个 HTML 文档。重要的是，这意味着文档中的任何样式表等都将被丢弃。特别是您在这里的问题，这将包括 Bootstrap 样式表。这是人们在 CSS 还没有真正出现之前的一天用来处理打印的方式。现在，有一种更可取的方法来处理从打印件中删除无关的内容。您只需通过它添加特定于打印的样式并隐藏您不想打印的元素(例如页眉)。例如:

@media print {
    #Header { display:none; }
}

您也可以使用相同的方法来更改样式以改进打印布局。也许您希望文本在打印时变大或变小。您只需添加类似 body { font-size:12pt; 的内容 在此 block 内。

您实际需要的唯一 JavaScript 只是 window.print()。您的打印按钮会调用它，并且您的特定于打印的 CSS 应该接管以修改打印版本中需要修改的内容。