至於列印整個頁面的，沒什麼好說的。今天我給大家分享一個列印指定區域的方法，你想列印哪裡，就列印哪裡！

我也是剛剛開始接觸列印這一塊功能的，然後當然是找度娘深入瞭解了一番啦，期間試了網上的各種方法，有的壓根就沒效果；

有的可以實現列印部分割槽域的頁面，但是在列印介面會丟失樣式，那樣子介面會很醜；下面我會列出網上的部分方法，以及我的方法。（外掛我沒有試過~）

網上方法一：（該方法我在vue頁面使用沒有做到指定區域列印，而是列印全部）

網上方法二：（該方法我在vue頁面使用可以做到列印部分割槽域，但是樣式會丟失）

我的實現方法：

列印前的頁面

點選列印按鈕後的頁面

實現方法思路：既然是列印頁面，那麼我們不妨逆向思維推一下，肯定是頁面顯示什麼，就會列印什麼，所以，，

我們可以在點選列印按鈕的時候，把不需要列印的內容全部隱藏，就可以啦（偷笑）。各位大佬如果有更加好的方法，記得留言分享哦

methods: {
      //  點選列印按鈕
      clickPrinting() {
        //  找到需要隱藏的DOM節點
        let head = document.getElementsByClassName('gd-biz-header')[0];
        let printBtn = document.getElementsByClassName('right-side')[0];
        let from1 
 
= document.getElementById('menu2');
        let from2 = document.getElementsByClassName('two')[0];
        let fclbz1 = document.getElementById('menu3');
        let fclbz2 = document.getElementsByClassName('tables')[0];
        let footer = document.getElementsByClassName('footer')[0];
        let allBtn 
 
= document.getElementsByClassName('allBtn')[0];

        //  給對應DOM新增class
        head.classList.add("printHideCss")
        printBtn.classList.add("printHideCss")
        from1.classList.add("printHideCss")
        from2.classList.add("printHideCss")
        fclbz1.classList.add("printHideCss")
        fclbz2.classList.add("printHideCss")
        footer.classList.add("printHideCss")
        allBtn.classList.add("printHideCss")

        window.print(); //  呼叫列印功能
        window.location.reload(); //  點選取消列印後重新整理頁面，恢復點選列印按鈕之前的原始資料
      },

 版權宣告：本文為博主原創文章，轉載需註明出處。https://www.cnblogs.com/silent007/p/9960435.html 

***************************************    END   ***************************************