简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

js implementation of partial page print preview principle and sample code_javascript skills

WBOY
Release： 2016-05-16 16:42:38
Original
2120 people have browsed it

Recently, a friend asked how to print preview in js. Today I will explain it. First, let’s understand the printing principle. In fact, partial printing of the page is very simple. Just make a starting mark for the part you want to print. As for how to write the mark, you can write whatever you want. I will write here the content that needs to be printed

. Because the markup does not need to be seen by users, I added a comment! The specific implementation code is as follows: 

<!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>
Copy after login
Related labels：
Printing preview
source：php.cn
Previous article：My Node.js learning path (3) - node.js functions, callbacks, synchronous and asynchronous code and event loop_node.js Next article：Summary of methods to obtain IP address using js_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to print selected checkbox value after submission This is my list of checkboxes and the buttons I need to submit data..<label>AccessLo...
From 2024-04-06 13:07:43
0
2
337
Add additional values ​​to displayed format data fields using javascript I'm trying to achieve this: I want to create a form that collects data entered by the user...
From 2024-04-04 15:17:13
0
1
3589
How to pass multiple lists from ajax to Django I have a problem, I want to get all the data from the list, so I want to loop through each...
From 2024-04-03 23:20:06
0
1
362
Enhance error message output in Node.js to close the listener I have the following code that handles http requests. request.connection.addListener('clos...
From 2024-04-03 09:35:52
0
1
337
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！