NodeJs+Vue+MongoDB后台管理系统模板（3）调用Chrome接口数据打印

约定不等于承诺〃 2023-08-17 16:04 62阅读 0赞

有的时候后台管理系统需要实现数据的打印功能，这时候就需要去调用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()方法，调用的时候会阻止代码的执行，直到打印页面关闭，这时候我选择的是简单处理，就是再次跳转当前页面。

函数调用后的效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70][]

最后想要完整代码的，欢迎访问我的[GitHub][]，最好来个Star，哈哈。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70]: /images/20230810/fbfe41bb005744f9956049c1ae7110ff.png
[GitHub]: https://github.com/hushuaibo/mobileBooksCampusAdmin/blob/master/src/page/user/user.vue