Maison > Article > interface Web > js implémentation du principe d'aperçu avant impression de page partielle et exemples de compétences code_javascript

js implémentation du principe d'aperçu avant impression de page partielle et exemples de compétences code_javascript

WBOYoriginal: 2016-05-16 16:42:382114parcourir

Récemment, un ami m'a demandé comment imprimer un aperçu en js. Aujourd'hui, je vais l'expliquer. Commençons par comprendre le principe de l'impression. En fait, l'impression partielle de la page est très simple. Faites simplement une marque de départ pour la partie que vous souhaitez imprimer. Quant à la façon d'écrire la marque, vous pouvez écrire ce que vous voulez. J'écrirai ici deb9743a1dda5b69a1ef24bbfc365042 le contenu qui doit être imprimé

c474806c1b49f890ebb5bd06e2d26ef3. Parce que le balisage n'a pas besoin d'être vu par les utilisateurs, j'ai ajouté un commentaire ! Le code d'implémentation spécifique est le suivant :

<!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>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Mon parcours d'apprentissage Node.js (3) - fonctions node.js, rappels, code et événement synchrones et asynchrones loop_node.jsArticle suivant：Mon parcours d'apprentissage Node.js (3) - fonctions node.js, rappels, code et événement synchrones et asynchrones loop_node.js

Articles Liés

Voir plus