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

最新推荐文章于 2024-06-03 09:37:51 发布

ღ故里᭄ꦿ࿐

最新推荐文章于 2024-06-03 09:37:51 发布

阅读量467

点赞数 2

分类专栏：后台开发功能实现前端框架

本文链接：https://blog.csdn.net/Hunt_bo/article/details/101562624

版权

功能实现同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端框架

17 篇文章 0 订阅

订阅专栏

后台开发

10 篇文章 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()方法，调用的时候会阻止代码的执行，直到打印页面关闭，这时候我选择的是简单处理，就是再次跳转当前页面。

函数调用后的效果如下：

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

ღ故里᭄ꦿ࿐

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
NodeJs+Vue+MongoDB后台管理系统模板（3）调用Chrome接口数据打印

有的时候后台管理系统需要实现数据的打印功能，这时候就需要去调用Chrome的接口进行数据的打印，window.print()会打印整个HTML页面，其实不是我们需要结果，这时候就需要进行一些处理，比如我得只需要去打印表格内的内容，这时候我选择封装一个打印的函数。print(){ this.showOperation = false; setTimeout(()=>{ ...
复制链接

扫一扫