有的時候後臺管理系統需要實現數據的打印功能,這時候就需要去調用Chrome的接口進行數據的打印,window.print()會打印整個HTML頁面,其實不是我們需要結果,這時候就需要進行一些處理,比如我得只需要去打印表格內的內容,這時候我選擇封裝一個打印的函數。
print(){
this.showOperation = false;
setTimeout(()=>{
const headStr = "<html><head><title></title></head><body>";
const newStr = this.$refs.print.innerHTML;
const footStr = "</body>";
document.body.innerHTML = headStr + newStr + footStr;
window.print();
window.location.href='/user'
},10);
},
先定義一個基本的HTML頁面所需要的基本標籤,headStr和footStr,接下來通過在表格中添加一個叫做print的ref,再去獲取它的HTML標籤,進行拼接,這時候頁面中就只剩下一個表格了,這時候再去調用window.print()方法,調用的時候會阻止代碼的執行,直到打印頁面關閉,這時候我選擇的是簡單處理,就是再次跳轉當前頁面。
函數調用後的效果如下:
最後想要完整代碼的,歡迎訪問我的GitHub,最好來個Star,哈哈。