vue实现连接打印机功能
生活随笔
收集整理的這篇文章主要介紹了
vue实现连接打印机功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.安裝依賴
npm i vue-print-nb2.掛載依賴
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实现连接打印机功能的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 给中国学生的第三封信:成功、自信、快乐
- 下一篇: 四记忆宫殿