Printing specific div tag in laravel

Question

I need to print whole content in a specific div on laravel. So far, i could print this div tag with javascript. But the result is not so good because the css is not included when i print it. Is there any better way to get this thing done? Here is my code.

<div id="reportPrinting">
    <div class="row pt-50">
        <div class="col-sm-10 col-sm-offset-1">
            //i cut this part because it to long
        </div>
    </div>
</div>

<form>
    <input type="button" value="Print this page" onClick="printReport()">
</form>

<script type="text/javascript">
    function printReport()
    {
        var prtContent = document.getElementById("reportPrinting");
        var WinPrint = window.open();
        WinPrint.document.write(prtContent.innerHTML);
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
    }
</script>

I use the "Print this page" button to trigger the print process.

Answer 1

You need to write the css to the document as well as change screen to print (or all) for the css to work properly:

document.write( "<link rel='stylesheet' href='style.css' type='text/css' media='print'/>" );