简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

js实现局部页面打印预览原理及示例代码_javascript技巧

WBOY
发布： 2016-05-16 16:42:38
原创
2119 人浏览过

最近有朋友问js 如何打印预览，今天就来讲解一下，首先了解一下打印原理，其实局部打印页面很简单。就是把你需要打印的部分做一个起始标记，至于标记如何写，随便你写什么。我这里就写 需要打印的内容

. 因为标记是不需要让用户看见的所以加了注释！具体实现代码如下：

<!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>
登录后复制
相关标签：
打印预览
来源：php.cn
上一篇：我的Node.js学习之路（三）--node.js作用、回调、同步和异步代码 以及事件循环_node.js 下一篇：js获取IP地址的方法小结_javascript技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
来自于 2024-04-06 21:58:04
0
1
800
提交后如何打印选定的复选框值 这是我的复选框列表和我需要提交数据的按钮..<label>AccessLocations</label><br/><inputtype=&...
来自于 2024-04-06 13:07:43
0
2
337
使用 javascript 将附加值添加到显示的格式数据字段 我正在努力实现这一目标：我想创建一个表单来收集用户输入的数据并将其打印在屏幕上。到目前为止，我已经通过下面的代码片段实现了几乎正常的效果，但是，我需要“textone”和“text...
来自于 2024-04-04 15:17:13
0
1
3589
传递多个列表从ajax到Django的方法 我有一个问题，我想从list获取所有数据，所以我想循环所选项目中的每个数据并将其插入数据库，目前，当我打印['[objectObject]','[objectObject]'],时...
来自于 2024-04-03 23:20:06
0
1
362
增强 Node.js 中的错误信息输出关闭监听器 我有以下处理http请求的代码。request.connection.addListener('close',function(had_error){console.log(had...
来自于 2024-04-03 09:35:52
0
1
337
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！