1.安裝依賴

npm i vue-print-nb

2.掛載依賴

Vue.use(Print)

3.包裝元素

<!-- 需要給外層包裹元素ref，在點擊打印階段需要使用ref獲取打印元素，需要指定id用于捆綁觸發打印的按鈕 --> <div ref="printTest" id="printTest">需要打印的數據 </div>

4.創建打印按鈕

<!-- v-print指令可以直接綁定到對應的打印區域--> <el-button v-print="'#printTest'" type="primary" size="mini">打印</el-button> //v-print除了綁定對應打印區域的id外，還可以綁定一個配置對象。 printObj: {id: "printTest", //綁定打印區域的idpopTitle: "抄單打印", //內容標簽，可以設計頁眉//調用打印工具前的回調函數beforeOpenCallback(vue) {vue.printLoading = true;console.log("打開之前");},//調用打印工具成功回調函數openCallback(vue) {vue.printLoading = false;console.log("執行了打印");},//關閉打印機的回調closeCallback(vue) {console.log("關閉了打印工具");}, },

官網參考

5.批量打印分頁

在我們需要進行選中多條數據進行打印時，肯定需要將每條數據進行分頁處理，一條數據可以打印出多頁，但是第二天數據應該在新的一頁進行打印而不是緊挨著上一條在同一頁進行打印。使用<p style="page-break-after:always;"></p>置于打印數據底部就行！

總結

以上是生活随笔為你收集整理的vue实现连接打印机功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。