很多网站都有此功能，当浏览到底部时都会有一个打印按钮，点击打印按钮就可以完成打印功能，功能非常不错，人性化，代码非常的简单。

一、只要调用window.print()函数就可以实现打印当前页面

<a href="javascript:window.print()">脚本之家</a>

二、如何打印页面中的指定内容

<!DOCTYPE html>
<html>
<head>
　　<meta charset=" utf-8">
　　<meta name="author" content="http://www.jb51.net/" />
　　<title>指定被打印的内容</title>
　　<script language="javascript">
　　　　function printdiv(printpage){
　　　　　　var newstr = printpage.innerHTML;
　　　　　　var oldstr = document.body.innerHTML;
　　　　　　document.body.innerHTML =newstr;
　　　　　　window.print();
　　　　　　document.body.innerHTML=oldstr;
　　　　　　return false;
　　　　}
　　　　window.onload=function(){
　　　　　　var bt=document.getElementById("bt");
　　　　　　var div_print=document.getElementById("div_print");
　　　　　　bt.onclick=function(){
　　　　　　　　printdiv(div_print);
　　　　　　}
　　　　}
</script>
</head>
<body>
　　<div id="div_print">
　　　　<h1 style="Color:Red">这是要被打印的内容</h1>
　　</div>
　　<div style="Color:Red">欢迎您</div>
　　<input name="print" type="button" id="bt" value="点击打印" />
</body>
</html>
三、还有一点，就是CSS样式表的问题了，打印的效果是不包含背景的打印的，设置时注意一下。
<style media="print">、<link media="print">的用法合理应用，media="print"是不被网页所显示的，只能在打印的效果上存在，可以设置出打印效果和在网页上所显示的不一样。

javaScript实现点击按钮直接打印的更多相关文章

  1. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  2. 五、JavaScript之点击按钮调用相关JavaScript函数

    一.代码如下 二.执行之后 三.点击按钮之后,内容被改变

  3. javascript笔记——点击按钮（或超链接）如何跳转到另外一个页面并执行目标页面的js函数

    页面跳转同时执行js代码$(function(){});url参数传递 标题的前半部分其实不必赘述,按钮也可以换成超链接.. 假设是需要在A页面上的一个按钮,点击后跳转到B页面,传一些参数后且并B页面 ...

  4. 二、JavaScript之点击按钮改变HTML样式 (CSS)

    一.代码如下 二.点击前 三.点击后 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" c ...

  5. 【Javascript Demo】防止按钮在短时间内被多次点击

    如果一个按钮可以在短时间内多次点击,那么有可能会被用户恶意点击,为防止这种情况,可以设定一定时间内只能点击一次,其他时间禁止点击按钮. 1.效果如下:     2.代码如下:   <div> ...

  6. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  7. 请写出一段JavaScript代码，要求页面有一个按钮，点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  8. 一、JavaScript之第一个实例，点击按钮修改文本内容

    一.代码如下: 二.运行后效果如下 三.点击按钮,"曾经沧海难为水"变成了日期事件了 <!DOCTYPE html> <html> <meta htt ...

  9. 使用定时器限制点击按钮发送短信（附源码）--JavaScript小案例

    不说多哈,有注释哦,直接贴代码了哈,有疑问请追评呢…… 1.禁用按钮: this.disabled = "disabled"(this指按钮)或: this.disabled = ...

随机推荐

  1. 前端 javascript 数据类型

    JavaScript 中的数据类型分为原始类型和对象类型: 原始类型 数字 字符串 布尔值 对象类型 数组 “字典” ...

  2. PSR-2 代码风格规范

    https://blog.csdn.net/qq_28602957/article/details/52248239 这篇规范是PSR-1(基本代码规范)的扩展和继承. 本规通过制定一系列规范化PHP ...

  3. web.xml中的元素

    error-page元素包含三个子元素error-code,exception-type和location.将错误代码(Error Code)或异常(Exception)的种类对应到web应用资源路径 ...

  4. jetBrains设置appium环境

  5. Java游戏服务器成长之路——弱联网游戏篇（源码分析）

    前言 前段时间由于公司的一款弱联网游戏急着上线,没能及时分享,现在基本做的差不多,剩下的就是测试阶段了(本来说元旦来分享一下服务器技术的).公司的这款游戏已经上线一年多了,在我来之前一直都是单机版本, ...

  6. 最值得阅读学习的 10 个 C 语言开源项目代码

    1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以模拟3万个并发连 ...

  7. 【转】阿里巴巴技术专家杨晓明：基于Hadoop技术进行地理空间分析

    转自:http://www.csdn.net/article/2015-01-23/2823687-geographic-space-base-Hadoop [编者按]交通领域正产生着海量的车辆位置点 ...

  8. react build 后打包发布总结

    一,部署在apache  web服务器上(wamp   |   xammp) 1.后台接口需要做跨域设置 (1)在服务端利用Access-Control-Allow-Origin响应头解决.  设置A ...

  9. iOS开发之CoreData数据存储

    iOS开发之CoreData数据存储 参考资料:https://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/CoreD ...

  10. CentOS系统下yum命令的详细使用方法

    yum是什么yum = Yellow dog Updater, Modified 主要功能是更方便的添加/删除/更新RPM包. 它能自动解决包的倚赖性问题. 它能便于管理大量系统的更新问题 yum特点 ...