整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
印機打印的三種方式、適用各種web框架(vue.js/web打印/報表打印)_嗶哩嗶哩_bilibili
-----------------------------------------------------------------------------------------------------------------------------
?
印就是把頁面上的文字、圖片等可見數據通過打印機等輸出在紙張上的操作，瀏覽器基本都自帶打印功能。在你需要打印的頁面中按下組合鍵“Ctrl+p”就可以調用打印功能，它會把該頁面中的所有可見內容（即window.document.body.innerHTML中的內容）都輸出到打印中。當然如果你的網頁版面太大可能會出現無法正確打印文件，比如出現打印不全（超出可打印的范圍被切除）或者部分內容缺失（部分內容丟失）。這時候我們就需要選擇更大的紙張來打印頁面了，默認紙張尺寸為A4大小。
如果你想打印指定區域的內容那么就需要在項目中自己實現打印功能了，Vue中實現打印功能目前有兩種比較常用的方法，一種是通過組件vue-print-nb來實現。直接通過命令安裝：npm i vue-print-nb -S ，在main.js中進行全局注冊組件。在需要打印內容的區域設置id，然后通過v-print來綁定該id實現對指定區域的內容進行打印。
當然如果你想配置更多的參數我們也可以通過v-print綁定對象，在對象中我們可以為打印設定以下屬性：id、standard、extraHead、extraCss、popTitle和endCallback，具體的注釋我在代碼中有說明了。打印默認會顯示頁眉和頁腳信息，你可以在打印界面自行取消勾選，也可以在直接定義css樣式來隱藏頁眉和頁腳：@page{margin: 5mm; /* 設置打印中的打印邊距*/} 。
該插件提供了一個print.js文件（我將該文件放在項目中的src/assets目錄下），同樣在main.js中將其引入到項目中來。通過ref屬性定位打印內容區域，vuePlugs_printjs更強大的一點就是即使內容在打印區域內也可以通過添加class="no-print"樣式來屏蔽該元素中的內容。
前面通過文章Vue實戰063：常見的幾種二維碼生成方法和保存至本地我們已經知道如何生成二維碼了，這里我選用了vue-qr組件來生成二維碼圖像。接下來我們來打印這個二維碼，這里我們只要在需要打印二維碼的DOM標簽上添加ref屬性來定位打印區域，再通過一個按鈕來觸發打印功能即可。
如果你用qrcode生成二維碼的時候你就會發現在打印的時候該二維碼并不會被顯示，因為qrcode是通過canvas標簽繪制的二維碼圖像，canvas繪制圖像是異步執行的需加載完資源才會調用drawImage方法來繪制圖像。打印功能是將指定區域的代碼寫入到新的窗口中進行輸出的，再寫入canvas標簽時只是拿到了對應的標簽并沒有進行圖像繪制自然就無法顯示了。
用img圖像替換掉canvas畫布，在調用打印之前調用canvas的toDataURL()方法將canvas數據轉換成圖片格式，創建一個img的標簽元素并將toDataURL生成的數據賦給img標簽的src屬性，獲取畫布的父標簽并把img標簽內容加載到該父標簽中同時刪除畫布標簽內容，接著再執行打印功能即可。
以上兩種方式操作起來都很簡單，個人比較喜歡vuePlugs_printjs插件，因為可控性相對強些可以過濾掉一些不需要輸出的內容。以上內容是小編給大家分享的Vue指定區域打印功能的實現（附示例），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。更多Vue實戰技巧可以參考專欄：Vue實戰系列，在此也非常感謝大家對小編的支持！
天小編在教課的時候，發現很多剛剛接觸這個領域的同學對一些小的細節部分還是存在疑惑，網上的很多博客也只是只貼出了代碼，并不了解是什么意思，小編今天就具體的來給大家講一講如何在vue-cli的環境下實現web的打印指定區域的內容(文字或者表格圖表)，讓大家在學習的過程中少走一些彎路。
走起，先看效果圖：
如何實現上訴需求呢，咱們來一一講解，首先咱們先把代碼切分為四個部分：
1.創建一個構造函數Print
2.給Print的prototype添加需要用到的方法
3.聲明一個常量MyPlugin為它添加方法，將Print方法掛載到Vue原型鏈上
4.export導出MyPlugin
第一步 創建一個構造函數Print，默認接受兩個參數，一個是打印的指定區，一個是自定義頁眉的標題。 要注意哦，有些同學這里可能會不懂這個判斷的意思，因為這里的this是指向Vue的通過instanceof來判斷這時候的this是否為Print的子類，如果不是，就通過new操作符調用，使this指向Print本身。
然后這里做一個容錯，判斷一下傳進來的dom是否為object、是否有nodeType和nodeName這兩個屬性，如果沒有，證明不是一個節點，那就取dom下的$el，然后把處理過后的dom和name分別賦值給this.dom和this.name，方便在prototype里隨時取值同時執行初始化方法。
第二步 給Print的prototype添加需要用到的方法，init方法里為了實現打印并且自定義標題，我們需要重新獲取到樣式和頁面元素，展示到一個新的html里面，最后通過writeIframe方法完成咱們最終打印的效果。
在getStyle方法里，自定義一個空字符串，通過querySelectorAll方法獲取到當前頁面全部的style和link標簽，并且通過循環拿到每一個的outerHTML（純文本形式）最后通過return暴露出來
getHtml方法主要是特殊處理一下input、textarea、select、canvas把前三個打value值重新獲取通過innerHTML的方法展現出來，把canvas畫布轉換成圖片的格式展現出來。
然后進入下一步setHeader方法，來自定義頁眉的標題。這里是因為在DOM上，input、textarea、select中的值并沒有在元素內，只有純文本才可以被print()，同樣打印也不支持canvas。所以咱們需要重新處理一下，使里面的值也可以被打印出來~
在這一步，咱們實際上是重新創建了一個html標簽和title，然后通過克隆出要打印的區域，添加到新創建的html當中。然后return出這個新頁面里的全部純文本元素。這個時候已經咱們需要打印的html和自定義標題已經出來了。這里同學們千萬要注意，因為打印的默認標題是頁面里的title，如果直接改變原頁面的title來實現自定義標題效果的話，會造成原頁面的title錯亂。
這個時候回到init方法，content就是咱們全部需要輸入的標簽。執行writeIframe方法，這里面主要是通過document.open來打開一個新文檔，document.write來編寫文檔的內容，document.close來關閉文檔操作使其內容可以顯示出來。
然后紅線圈出的地方有一個獲取全部類名為isNeedRemove的操作，是因為之前在把canvas轉換成圖片的時候，給每個的后面都插入了一個轉換后的img這里為了讓圖形不出現兩個的情況，需要刪除所有類名為isNeedRemove的節點，同時執行最終的打印方法。
這里的frameWindow形參其實就是咱們需要調用到的window，通過try catch來保證結果在一個控制范圍內，如果成功運行調用window下的print方法，失敗則拋出異常。
最終將寫好的方法添加到vue的原型鏈上，在公共的main.js 里通過import引入，Vue.use掛載，然后在想要使用的組件內直接通過this.$print()使用即可
好啦~今天講到這里希望大家對這個web前端來實現打印的方法有一個新的理解，希望能給到大家一些幫助~咱們下期再見。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
