window.print打印指定html元素中的內容

時間 2019-12-11

標籤 window.print window print 打印指定 html 元素內容欄目 Windows 简体版

原文原文鏈接

一般有些時候咱們項目過程當中使用到打印功能，而wndow.print即是系統裏提供的一個函數。html

可是直接使用的話，它打印的將是整個頁面的全部元素，而有些時候咱們又只須要打印部份內容。函數

<body>
    <div id="content" style="width: 500px; height: 500px; border: 1px solid #ff6a00;">

首艘國產航母下水、國產大型客機C919成功首飛、「天眼」探空、「蛟龍」入海、「墨子號」發射升空……五年間，一系列「國之重器」讓世界另眼相看。這些激動人心的場景，讓中國人的信心和夢想被不斷點燃。spa

而改革發展穩定、內政外交國防、治黨治國治軍等各方面，在總書記的領導下，取得了歷史性成就和變革。五年來，黨中央推出一系列重大戰略舉措，出臺一系列重大方針政策，推動一系列重大工做，解決了許多長期想解決而沒有解決的難題，辦成了許多過去想辦而沒有辦成的大事。code

「環顧世界，沒有一個國家能像當今中國這樣，以一種說到作到、只爭朝夕的方式推動改革。」對這場變革，有外媒如此評價。htm

認清歷史方位，才能看清前行的方向。近代以來，從落後捱打到新中國成立「站起來」、改革開放「富起來」再到「強起來」，咱們經歷了不少大風大浪。現在，民族復興的接力棒交到了咱們這一代人的手上。blog

</div>
    <input type="button" id="print" value="打印" />
</body>

如以上html代碼，有一個div和一個input，而我只須要打印div。事件

根據其原理，window.print()打印的是body裏的全部內容，那麼只須要在執行打印功能的時候在body裏只保留要打印的內容，就能夠實現了。ip

代碼以下：input

    <script>
        $(function () {
            //給打印按鈕添加點擊事件
            $("body").on("click", "#print", function () {

                //獲取要打印部分的html
                var html = $("#content").prop("outerHTML");

                //獲取全部要body中的內容，做爲備份
                var oldhtml = $("body").prop("outerHTML");

                //將打印的html賦值給body
                $("body").html(html);

                //打印
                window.print();

                //同時把原來的html還原
                $("body").html(oldhtml);
            })
        })
    </script>