vue項目-打印頁面中指定區域的內容（親測有效！）

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

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

有的可以實現打印部分區域的頁面，但是在打印界面會丟失樣式，那樣子界面會很丑；下面我會列出網上的部分方法，以及我的方法。（插件我沒有試過~）

網上方法一：（該方法我在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   ***************************************