最近在做后台管理系统时，需要实现一个打印功能，打印的内容为页面上指定的dom。此时可以通过window.print()功能来实现：

`html`部分

<button @@click="printpage">打印部分内容</button>
<div id="printContent"><h1>打印内容</h1><br /><br /><br /><div>打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容</div><div>222打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容打印内容</div>
</div>

`css`部分

@media print {body {//设置一下边框，可以显示内容的范围，用于测试border: 1px solid red;//添加height:auto;才能打印多页，否则只能打印一页height: auto;}h1,div {//添加样式，打印时的样式可以跟页面上的样式不一致font-size: 50px;color: red;}h1 {//在某个元素之前添加分页符，也就是在此元素之前实现换页，具体给哪个元素换页，需要自行判断，然后指定换页样式的类名即可page-break-before: always;}.footer {//在某个元素之后添加分页符，也就是在此元素之后实现换页，具体给哪个元素换页，需要自行判断，然后指定换页样式的类名即可page-break-after: always;}@page {overflow: visible;/* 纵向 */size: portrait;/* 边距 上右下左 */margin: 1cm 2cm 1cm 2cm;}
}

`js`部分

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;
}

最终功能实现！！！

window.print()实现打印指定内容——功能实现相关推荐

vue分页打印指定内容
再更新一种浏览器指定内容打印,^_^ ,需要分页打印的话,建议方法2看到最后.方法一没试,不知道能不能行.理论应该是可以的^_^.在此记录一下我的方案 ------------------分割线--- ...
ie调用window.print批量打印数据表格。
需求根据勾选的checkbox,一次将数据打印出来. 注意 1,我第一次是用循环一次一次调用window.print方法,想把数据一张一张打出来.结果因为输入输出流的问题,这样是一个死路. 取巧的思 ...
js 调用window.print()方法打印
目的:打印功能实现,添加水印步骤: 1.写好jsp页面 2.写打印方法即window.print()打印当前页面,如果只想打印部分页面的话,可以截取该部分赋值给body即可 3.调用打印方法即可 ...
js使用window.print()实现打印功能
js使用window.print()来实现打印功能 1.首先在需要打印的内容标签上面绑定ref <div ref="tableRef">需要打印的内容 </div ...
浏览器打印之 window.print() 设置打印样式和内容
项目中用的是谷歌浏览器,js 执行 window.print() 就会调用谷歌浏览器的打印功能. 打印其实打印的是整个当前网页,只是用媒体查询(@media print)把网页中要打印的内容做了显示, ...
js 实现用window.print(）打印页面中的部分内容，局部打印
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 如下方法: function printProof(){var printData = docume ...
html表格打印填充分页,window.print()页面打印之表格内容分页填充进行分页打印
windwow.print()用于打印当前窗口的内容,很简便,可当内容特殊并且打印有特殊需求的时候就要绕个圈了.下面是需要打印的表格: 当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出 ...
window.print()页面打印之表格内容分页填充进行分页打印
windwow.print()用于打印当前窗口的内容,很简便,可当内容特殊并且打印有特殊需求的时候就要绕个圈了.下面是需要打印的表格: 当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出 ...
window.print只打印了1页的原因
2019独角兽企业重金招聘Python工程师标准>>> 当css中做如下设置 body{ height:100% } 或者 body { height: 100% } window. ...

window.print()实现打印指定内容——功能实现

`html`部分

`css`部分

`js`部分

window.print()实现打印指定内容——功能实现相关推荐

最新文章

热门文章

window.print()实现打印指定内容——功能实现

html部分

css部分

js部分

window.print()实现打印指定内容——功能实现相关推荐

最新文章

热门文章

`html`部分

`css`部分

`js`部分