vue專案 列印頁面中指定區域的內容
阿新 • • 發佈:2018-11-14
至於列印整個頁面的,沒什麼好說的。今天我給大家分享一個列印指定區域的方法,你想列印哪裡,就列印哪裡!
我也是剛剛開始接觸列印這一塊功能的,然後當然是找度娘深入瞭解了一番啦,期間試了網上的各種方法,有的壓根就沒效果;
有的可以實現列印部分割槽域的頁面,但是在列印介面會丟失樣式,那樣子介面會很醜;下面我會列出網上的部分方法,以及我的方法。(外掛我沒有試過~)
網上方法一:(該方法我在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 ***************************************