js使用window.print()实现打印功能

js使用window.print()来实现打印功能

1.首先在需要打印的内容标签上面绑定ref

<div ref="tableRef">需要打印的内容
</div>
<!--点击按钮打印-->
<el-button  @click="billPrintClick" >打印</el-button>

2.按钮打印事件

billPrintClick() {let newstr = this.$refs.tableRef.innerHTML  // 获取需要打印的内容let oldstr = document.body.innerHTML  // 获取别打印页面的内容document.body.innerHTML = newstr  // 获取表格表头，表格内容改变打印内容字体的颜色document.getElementsByTagName('thead')[0].style.color = '#000'document.getElementsByTagName('tbody')[0].style.color = '#000'window.print()document.body.innerHTML = oldstrwindow.location.reload()  // 退出刷新页面return false
}

3.设置打印布局（横向、纵向、边距）

@media print {@page {// 纵向size: portrait; // 横向size: landscape;// 边距margin: 0cm 0cm 0cm 0cm;}}

4.去除浏览器默认页眉页脚
打印时默认有页眉页脚信息，显示在页面外边距范围，我们可以通过去除页面模型page的外边距，使其隐藏页眉页脚信息，再通过设置 body 元素的 margin 来保证打印出来的页面带有外边距

@media print {@page {margin: 0;}body {margin: 1cm;}
}

window.open()使用新窗口打印
我们还可以使用新窗口打印，将要打印的HTML，赋值给新窗口的body，打印之后我们再将之关闭

// 获取打印的区域
let newstr = this.$refs.tableRef.innerHTML;
// 将打印的区域赋值给新窗口body，进行打印
let newWindow = window.open('','');
newWindow.document.write(newstr);
newWindow.window.print();
newWindow.window.close();  // 打印完成后关闭后新窗口

js使用window.print()实现打印功能相关推荐

js 调用window.print()方法打印
目的:打印功能实现,添加水印步骤: 1.写好jsp页面 2.写打印方法即window.print()打印当前页面,如果只想打印部分页面的话,可以截取该部分赋值给body即可 3.调用打印方法即可 ...
js的window.print()打印背景图片，打印背景图片无法显示
js的window.print()打印背景图片题目描述 js的window,print()打印背景图片给body加了图片地址之后,非要设置浏览器打印选项里面设置背景图形打印才行,怎么通过js去设置默 ...
用JS在html页面实现打印功能
用JS在html页面实现打印功能打印方式一: 打印方式二: 打印方式三(此方式会重新打开一个浏览器窗口): 做项目时,有在网页实现全局和局部打印的需求,百度许久,现总结如下: 打印方式一: 1.首先 ...
浏览器打印之 window.print() 设置打印样式和内容
项目中用的是谷歌浏览器,js 执行 window.print() 就会调用谷歌浏览器的打印功能. 打印其实打印的是整个当前网页,只是用媒体查询(@media print)把网页中要打印的内容做了显示, ...
ie调用window.print批量打印数据表格。
需求根据勾选的checkbox,一次将数据打印出来. 注意 1,我第一次是用循环一次一次调用window.print方法,想把数据一张一张打出来.结果因为输入输出流的问题,这样是一个死路. 取巧的思 ...
window.print()实现打印指定内容——功能实现
最近在做后台管理系统时,需要实现一个打印功能,打印的内容为页面上指定的dom.此时可以通过window.print()功能来实现: html部分 <button @@click="pr ...
js 实现用window.print(）打印页面中的部分内容，局部打印
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 如下方法: function printProof(){var printData = docume ...
js打印window.print()图片打印
1. 这里用的是A4纸,设置打印表格属性(width:100%,height:980px) 2.由于打印可能存在多页,所以heightt属性必须严格控制. 3.由于自己是先隐藏不需要打印的DIV,然后 ...
HTML页面打印功能js代码,JavaScript_js实现页面打印功能实例代码(附去页眉页脚功能代码)，复制代码代码如下: html - phpStudy...
js实现页面打印功能实例代码(附去页眉页脚功能代码) 复制代码代码如下: @media print{ .print {display:block;} .notPrint {display:none; ...

js使用window.print()实现打印功能

js使用window.print()来实现打印功能

js使用window.print()实现打印功能相关推荐

最新文章

热门文章