如何打印页面中的指定元素

最新推荐文章于 2024-03-21 10:27:19 发布

xfkun233

最新推荐文章于 2024-03-21 10:27:19 发布

阅读量526

点赞数

文章标签：前端 html java

本文链接：https://blog.csdn.net/qq_44253836/article/details/125957176

版权

网页打印页面重构打印区域功能失效打印页

关键词由CSDN通过智能技术生成

方法一：

function Print(){
        var head_str = "<html><head><title></title></head><body>"; //先生成头部
        var foot_str = "</body></html>"; //生成尾部
        var older = document.body.innerHTML;
	var new_str = document.getElementsByClassName('blog-content-box')[0].innerHTML; //获取指定打印区域
        document.body.innerHTML = head_str + new_str + foot_str; //构建新网页
        window.print(); //打印刚才新建的网页
        document.body.innerHTML = older; //将网页还原
        return false;
};
Print();

大概就是在当前页面直接对内容进行修改并打印然后还原，这样下来有个问题，重建后的页面上所有的方法都会失效，也就是整个页面都无法使用了。

方法二：

编写一个专门的打印页，里面只存放需要打印的内容，从父组件传递参数至打印页，在打印页调用接口获取数据，然后使用以下方法

    print() {
      setTimeout(() => {
        window.print()
        this.$router.go(-1)
      }, 1000)
    },

就可以调出系统打印页，并在打印完成后返回原页面。

xfkun233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何打印页面中的指定元素

如何打印页面中的指定元素
复制链接

扫一扫