Vue Element 提供了一個方便的打印功能,可以通過簡單的代碼實現打印網頁的功能。在使用之前需要引入 ElementUI 和 vue-print-nb 插件。
// 安裝vue-print-nb npm install vue-print-nb // main.js 引入插件 import Print from 'vue-print-nb'; Vue.use(Print);
接下來,在需要打印的組件中放置一個按鈕,并綁定一個方法,以調用打印功能。
打印組件
這里是需要打印的內容
以上代碼中,我們在點擊頁面上的按鈕時,會調用 printPage 方法,并通過 this.$print() 方法調用 VueElement 的打印功能。在這個方法中,我們傳遞了打印區域的選擇器 .printArea 。注意:這個選擇器應該選中你想打印的內容所在的 HTML 元素。
此時,你可以運行你的程序,然后點擊打印頁面按鈕,就可以看到瀏覽器彈出打印頁的窗口了。
在實際開發中,我們還可以通過配置一些參數來定制打印的效果,例如隱藏頁眉頁腳、設置頁邊距等。完整配置及參數可以查看 Vue Element 官方文檔。