`window.print`——默认打印`body`中的全部内容

如果要打印特定dom中的内容，可以通过:

function printpage() {//打印的整体思路是：获取body的内容进行存储，然后获取打印区域的内容填充到body中，进行打印，打印完成后，再将之前存储的body内容重新赋值给body即可。windown.print()默认打印的内容是body的内容。let oldStr = window.document.body.innerHTML;let newStr = document.getElementById('printContent').innerHTML;window.document.body.innerHTML = newStr;window.print();window.document.body.innerHTML = oldStr;
}

但是我在使用过程中，用到了elementUi中的dialog弹层，打印的内容是弹层中的内容。如果用上面的方法就会遇到问题，导致弹层无法正常的关闭和打开。原因就是执行完window.print()后,重新给body赋值dom时，破坏了原有的结构。

为了能够正常的实现此功能，我最终采用了layer.open()打开一个新的页面，在此页面中所有的内容都是直接位于dody中的，因此可以直接打印，不需要给body中的dom获取后重新赋值的操作。

预览页面

`window.print()`打印页面

1.通过`layer.open()`打开新的页面——打印内容在新的页面中

 layer.open({type: 2,title: '物料清单',closeBtn: 1,shadeClose: true,content: 'DeliveryPrint?id=' + row.id,area: ['100%', '100%'],end: (index, layero) => {layer.close(index);}
})

2.新页面中在`mounted`中执行下面的代码

mounted(){//获取打印页面的内容接口this.getBillList(this.id);setTimeout(()=> {$(document).ready(()=> {//页面加载成功后，延迟打印setTimeout(()=> {window.print();//获取窗口索引，然后通过layer的方法进行关闭var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);return false;}, 100);});}, 2000);
}

3.`css`部分代码

@media print {body {height: auto;}.nextPageCls {page-break-after: always;}@page {overflow: visible;size: portrait;margin: 1cm 0.5cm -1cm 0.5cm;}
}

`body{height:auto}`设置此样式才能让页面打印多张，否则只能打印第一张

`page-break-after: always;`设置此样式表示要在此元素后面添加换页符

`@page`设置的是页面超出部分是否隐藏，页面横向或纵向，以及页边距等参数

上面的css样式中，为了能够将底部一个小方块(不知道哪里来的)隐藏掉，所以将底部的margin设置为负数，问题解决！

@page {overflow: visible;size: portrait;margin: 1cm 0.5cm -1cm 0.5cm;
}

最终功能实现！！！

window.print()+layer.open()——实现打印A4纸张内容的功能——功能实现相关推荐

css打印适应纸张_使用原生css+js+html实现打印A4纸张的功能页面
有时候我们需要使用html+css实现打印A4纸张的功能页面,以下代码实现 A4打印页面 /*横向*/ .a4-endwise{ margin: 0 auto; width: 1070px; heig ...
html 多个分页连续打印机,web使用window.print()实现分页批量打印。
写了有关于web客户端打印物料条码的功能.想着以后可能会用到,就把他给写下来了. 主要参考了:https://blog.csdn.net/ww130929/article/details/719771 ...
web使用window.print()实现分页批量打印。
写了有关于web客户端打印物料条码的功能.想着以后可能会用到,就把他给写下来了. 主要参考了:https://blog.csdn.net/ww130929/article/details/719771 ...
window.print() 前端实现网页打印详解
前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍. 一.print()方法 print() 方法用于打印当前窗口的内容.调用 prin ...
window.print（）表格打印完美实现分页
问题描述: 采用js打印页面,表格过长会出现分页,表格就会被裁减(那种每行固定就一行展示的简单,每个分页给他多少条数据就完事了),这里的问题是数据从后台获取,而且每一列都可能出现换行,多的可能达到1 ...
window.print() 文字过多会打印不全_明天开始打印准考证，你需要注意这些！
准考证打印时间&登录网址准考证下载时间:2019年12月14日-23日唯一下载网址:中国研究生招生信息网(https://yz.chsi.com.cn/) 视频版打印流程准考证打印超全流 ...
html打印指定区域内容,js print打印网页指定区域内容
比较简单的办法使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 细如下: 代码如下 .noprint{visibility:hidden} 要打印的内容.哈哈! ...
web打印window.print
这几天一直在研究通过web程序打印条形码到标签上,由于打印机和显示器不同,碰到了各种坑,现一一列出来,给各位参考. web打印有很多的方式,比如生成pdf打印.JQuery插件.window.prin ...
window.print()前端实现打印功能
方法介绍 window.print()方法用于打印当前窗口的内容. 默认打印页面中body里的所有内容. 调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印配置. 1. 打印方法 1 ...

window.print()+layer.open()——实现打印A4纸张内容的功能——功能实现

`window.print`——默认打印`body`中的全部内容

预览页面

`window.print()`打印页面

1.通过`layer.open()`打开新的页面——打印内容在新的页面中

2.新页面中在`mounted`中执行下面的代码

3.`css`部分代码

`body{height:auto}`设置此样式才能让页面打印多张，否则只能打印第一张

`page-break-after: always;`设置此样式表示要在此元素后面添加换页符

`@page`设置的是页面超出部分是否隐藏，页面横向或纵向，以及页边距等参数

window.print()+layer.open()——实现打印A4纸张内容的功能——功能实现相关推荐

最新文章

热门文章

window.print()+layer.open()——实现打印A4纸张内容的功能——功能实现

window.print——默认打印body中的全部内容

预览页面

window.print()打印页面

1.通过layer.open()打开新的页面——打印内容在新的页面中

2.新页面中在mounted中执行下面的代码

3.css部分代码

body{height:auto}设置此样式才能让页面打印多张，否则只能打印第一张

page-break-after: always;设置此样式表示要在此元素后面添加换页符

@page设置的是页面超出部分是否隐藏，页面横向或纵向，以及页边距等参数

window.print()+layer.open()——实现打印A4纸张内容的功能——功能实现相关推荐

最新文章

热门文章

`window.print`——默认打印`body`中的全部内容

`window.print()`打印页面

1.通过`layer.open()`打开新的页面——打印内容在新的页面中

2.新页面中在`mounted`中执行下面的代码

3.`css`部分代码

`body{height:auto}`设置此样式才能让页面打印多张，否则只能打印第一张

`page-break-after: always;`设置此样式表示要在此元素后面添加换页符

`@page`设置的是页面超出部分是否隐藏，页面横向或纵向，以及页边距等参数