JS - 在html页面实现打印功能

首先在head里面加入下面一段js代码：

<script language="javascript">
function preview(oper){if (oper < 10){bdhtml=window.document.body.innerHTML;//获取当前页的html代码sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取htmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取htmlwindow.document.body.innerHTML=prnhtml;window.print();window.document.body.innerHTML=bdhtml;} else {window.print();}
}
</script>

然后在所需要打印的代码，用和包围着，如下：

<!--startprint1--><!--打印内容开始-->
<div >...
</div>
<!--打印内容结束--><!--endprint1-->

最后加上一个打印的按钮：

<input type=button name='button_export' value='打印'  onclick=preview(1) >

在一个HTML页面里面，可以设置多个打印区域，需要改动一下的就只是几个数字就OK了。如：
在选择第二个区域里面时用包围着，而按钮自然也改成对应的preview(1)了。这样第二区域的打印就完成。

还有一点，就是CSS样式表的问题了，打印的效果是不包含背景的打印的，设置是注意一下。

JS - 在html页面实现打印功能相关推荐

用JS在html页面实现打印功能
用JS在html页面实现打印功能打印方式一: 打印方式二: 打印方式三(此方式会重新打开一个浏览器窗口): 做项目时,有在网页实现全局和局部打印的需求,百度许久,现总结如下: 打印方式一: 1.首先 ...
html页面实现打印功能
html页面实现打印功能可用代码效果截图之前领导让我写一个html页面,可以进行打印,我上网搜了一下,html页面实现打印功能的博客有很多,这里我就不一一介绍了,直接上干货. 可用代码 < ...
Vue页面实现打印功能
实现打印功能,需要安装一个插件vue-print-nb,使用方法如下 1)安装全局的插件 npm install vue-print-nb -S 2)在main.js中注册 import Print ...
使用js实现指定div内容打印功能
最近正在开发OA系统,涉及到了页面打印的相关操作.在实际的开发过程中,浏览器本身自带的打印操作默认打印整个可视界面,但是往往不能满足实际项目需要,打印页面指定内容的功能在OA系统中更加常见.网络上有很 ...
多页面分页打印功能实现
这篇文章主要记录自己在做项目时,遇到某个页面信息通过复选框的操作,多个页面同时打印的功能,因为本身window.print()只能打印一张,遇到多个页面时会开多个页面然后进程中断的现象. 像这边选中了 ...
js使用window.print()实现打印功能
js使用window.print()来实现打印功能 1.首先在需要打印的内容标签上面绑定ref <div ref="tableRef">需要打印的内容 </div ...
增加了页面的打印功能以及预览功能
弹窗部分代码 <div> <el-button type="primary" size="small" @click="previe ...
Web页面实现打印功能
核心的代码: window.print() 具体的实现如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
浏览器打印功能print.js
插件文档:https://printjs.com/ npm文档: https://www.npmjs.com/package/print-js npm install print-js --save ...

JS - 在html页面实现打印功能

JS - 在html页面实现打印功能相关推荐

最新文章

热门文章