Printing a div in HTML with all css applied

Question

I'm making a project in asp.net MVC. I want to print a div with all css styles applied. This div may contain one or more divs inside it. I tried a lot of javascript print codes but each of them failed. The page I want to print looks like this: Click here to view page. I just want to print the area below the input region which contains the details. But the problem is that when I use the javascript print method, my table view suddenly vanishes. This is the print preview that I get: Click here to view the print preview page. I've tried multiple methods but all have failed. Please Help. Thanks in advance. Below are my code files of front end

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

There's a number of issues here. First and foremost. You're not actually using a table. Instead, you're using Bootstrap's grid styles to make an approximation of a table. Using an actual HTML table is a better idea, not just for the consistency it provides but also for the sake of accessibility.

Second, the "borders" to your "table" are being applied via background images. While I think Chrome actually gives the user the option to print background images, now, it's not the default, and other browsers will simply ignore background images entirely when printing. Long and short, that approach is doomed to failure.

Third, when printing, you're actually taking the contents of this div and replacing the entire HTML document with that. Importantly, that means any stylesheets and such that were part of the document are thrown away. In particular to your issue here, that would include the Bootstrap stylesheet. This was the way people used to handle printing way back in the day before CSS was even really a thing. Now, there's a much preferable way to handle removing extraneously content from the print. You simply add print-specific styles and hide elements you don't want to print (such as a page header) via that. For example:

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

You can also use this same approach to change styles to improve the print layout. Maybe you want the text to be larger or smaller when printed. You simply add something like body { font-size:12pt; } inside this block.

The only JavaScript you actually need is just window.print(). Your print button calls that, and your print-specific CSS should take over to modify what needs to be modified in the print version.