js实现局部页面打印预览原理及示例代码
作者：whsnow 时间：2024-04-25 13:13:48
最近有朋友问js 如何打印预览，今天就来讲解一下，首先了解一下打印原理，其实局部打印页面很简单。就是把你需要打印的部分做一个起始标记，至于标记如何写，随便你写什么。我这里就写 <!--startprint--> 需要打印的内容
<!--endprint-->. 因为标记是不需要让用户看见的所以加了注释！具体实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title>打印预览简单实现</title>
</head>
<body>
<div>
这是body 里的内容不需要打印，具体的页面设计根据自己的要求自行设计。如果需要一个页面多个tag,可以动态生成tag
</div>
<!--startprint-->
<div>
这是我需要打印的内容
</div>
<!--endprint-->
<script type="text/javascript">
function preview()
{
var bdhtml=window.document.body.innerHTML;//获取当前页的html代码
var startStr="<!--startprint-->";//设置打印开始区域
var endStr="<!--endprint-->";//设置打印结束区域
var printHtml=bdhtml.substring(bdhtml.indexOf(startStr)+startStr.length,bdhtml.indexOf(endStr));//从标记里获取需要打印的页面
window.document.body.innerHTML=printHtml;//需要打印的页面
window.print();
window.document.body.innerHTML=bdhtml;//还原界面
}
preview();
</script>
</body>
</html>
标签：局部打印,打印预览
0
投稿猜你喜欢
JavaScript中实现字符串的取左取右（实现left和right功能）
2009-07-20 12:39:00
fetch 使用及如何接收JS传值
2024-04-29 13:11:21
一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）
2023-07-02 17:00:47
Python Pandas实现DataFrame合并的图文教程
2023-02-01 17:02:48
10行Python代码实现Web自动化管控的示例代码
2021-05-30 17:01:05
Python中第三方库Requests库的高级用法详解
2022-04-10 21:25:50
详解git commit --amend 用法
2023-03-21 00:29:52
Yahoo!上的小秘密
2007-08-23 09:48:00
MySQL常用SQL语句总结包含复杂SQL查询
2024-01-14 09:37:26
Python使用Nocalhost并开启debug调试的方法
2023-05-04 11:22:46
Python的Django框架中模板碎片缓存简介
2022-11-20 11:00:28
Python Pyecharts绘制箱线图详解
2021-03-31 05:57:05
Django model重写save方法及update踩坑详解
2021-01-21 08:45:52
django xadmin中form_layout添加字段显示方式
2023-08-06 23:59:12
jquery.jsPlumb实现拓扑图
2024-05-09 10:15:49
从Python的源码来解析Python下的freeblock
2023-07-26 20:44:39
php7性能提升的原因详解
2024-05-03 15:34:19
JavaScript声明变量的这四兄弟(var、let、function、const)
2024-05-09 15:03:05
SymPy库关于矩阵的基本操作和运算
2022-10-30 12:23:55
MySQL的join buffer原理
2024-01-28 01:44:19