[Solved] Print with CSS using JavaScript not working

Last Reply 4 months ago By arunkurmi

Posted 4 months ago

css doesnt work in print

<%-- Print --%>
<script>
    $(function () {
        $("#btnPrint").click(function () {
            var contents = $("#dvContents").html();
            var frame1 = $('<iframe />');
            frame1[0].name = "frame1";
            //frame1.css({ "position": "absolute", "top": "-1000000px" });
            $("body").append(frame1);
            var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
            frameDoc.document.open();
            //Create a new HTML document.
            frameDoc.document.write('<html><head>');
            frameDoc.document.write('</head><body><div style="width: 2480px;height:3508px;margin: 0;">');

            //Append the external CSS file.
            //frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
            frameDoc.document.write(`<link href="vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
                                    <link href="vendors/bootstrap-rtl/dist/css/bootstrap-rtl.min.css" rel="stylesheet"/>
                                    <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
                                    <link href="vendors/nprogress/nprogress.css" rel="stylesheet"/>
                                    <link href="vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet"/>
                                    <link href="vendors/iCheck/skins/flat/green.css" rel="stylesheet"/>
                                    <link href="vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet"/>
                                    <link href="vendors/iCheck/skins/flat/green.css" rel="stylesheet"/>
                                    <link href="vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
                                    <link href="vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet"/>
                                    <link href="vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet"/>
                                    <link href="vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet"/>
                                    <link href="vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet"/>
                                    <link href="vendors/switchery/dist/switchery.min.css" rel="stylesheet" />
                                    <link href="Res/Css/custom.css" rel="stylesheet" />`);
            //Append the DIV contents.
            frameDoc.document.write(contents);
            frameDoc.document.write('</div></body></html>');
            frameDoc.document.close();
            setTimeout(function () {
                window.frames["frame1"].focus();
                window.frames["frame1"].print();
                frame1.remove();
            }, 500);
        });
    });
</script>

 

You are viewing reply posted by: arunkurmi 4 months ago.