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,哈哈。

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