天天看點

js 列印指定頁面部分列印

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            function do_print(id_str){

                //id-str 列印區域的id

                var el = document.getElementById(id_str);

                var iframe = document.createElement('IFRAME');

                var doc = null;

                iframe.setAttribute('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');

                document.body.appendChild(iframe);

                doc = iframe.contentWindow.document;

                // 引入列印的專有CSS樣式,根據實際修改       

                //doc.write("<LINK rel=\"stylesheet\" type=\"text/css\" href=\"css/print.css\">");

                doc.write('<div>' + el.innerHTML + '</div>');

                doc.close();       

                iframe.contentWindow.focus();

                iframe.contentWindow.print();

                if (navigator.userAgent.indexOf("MSIE") > 0){

                    document.body.removeChild(iframe);      

                }

            }

        </script>

    </head>

    <body>

        <!--列印區域: -->

        <div id="print_box">

            <div style="width: 500px; height: 500px; border: 5px solid #6b3906;">

                <h1>hello kitty!</h1>

            </div>

        </div>

        <!--// 調用列印 -->

        <button onclick="javascript:do_print('print_box');">列印</button>

    </body>

</html>

繼續閱讀