NodeJs+Vue+MongoDB後臺管理系統模板(3)調用Chrome接口數據打印

有的時候後臺管理系統需要實現數據的打印功能,這時候就需要去調用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,哈哈。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章