这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下啊!还是很有用的哦!

在实际项目当中有时候还要包括数据统计的功能,这个我相信一般的项目都要有的吧(想听听大家的意见),这里也想请大家帮我推荐一个好的javascript插件吧,或者其他什么组件,不废话了,看代码去。

VS环境:2012

测试浏览器:所有主流浏览器(Chorme,Firefox,IE10,9,8,7,Opera,360安全(急速和兼容模式))

这是我的个人博客地址,大家可以看看哦!在留言板留言啊!http://yanghenglian.com/(使用高版本的浏览器打开哦,使用了html5和css3的一些东西,所以效果好,最好推荐谷歌)!

1.页面(代码)

打印页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript实现页面打印(适合B/S)程序</title>
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.printPage.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$(".btnPrint").printPage();
});
</script>
</head>
<body>
<!-- class自定义的类样式 -->
<p><a class="btnPrint" href="list.html">打印</a></p>
</body>
</html>

index.html

列表页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表页面</title>
</head>
<body>
<table>
<tbody>
<tr>
<td width="340" valign="top">1</td>
<td width="340" valign="top">2</td>
<td width="340" valign="top">3</td>
<td width="340" valign="top">4</td>
<td width="340" valign="top">5</td>
</tr>
<tr>
<td width="340" valign="top">上</td>
<td width="340" valign="top">山</td>
<td width="340" valign="top">打</td>
<td width="340" valign="top">老</td>
<td width="340" valign="top">虎</td>
</tr>
</tbody>
</table>
</body>
</html>

list.html



2.效果图

主要的代码就是这两个页面,其他的没什么很大的业务逻辑了。希望可以帮助到大家(不求推荐了,还是希望大家可以少走点弯路吧!),项目我也放到了csdn当中,希望大家可以下载查看,无私奉献。赞一个!

开源下载地址:http://download.csdn.net/download/mryanghenglian/6660357

将来的你一定会感激现在拼命的自己

开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)的更多相关文章

  1. vue html页面打印功能vue-print

    vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 使用方式 安装 npm install vue-print-nb --save ...

  2. javascript之页面打印

    WebBrowser组件是IE内置的浏览器控件,使用时,首先要在<body>标签的下面用<object>...</object>标记声明WebBrowser组件,代 ...

  3. 关于highcharts(功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库)

    官网http://www.hcharts.cn/ 引入下列文件 <script type="text/javascript" src="http://cdn.hch ...

  4. css table 布局 与 JavaScript 指定区域打印功能

      <!DOCTYPE html> <html lang="en"><head> <meta http-equiv="conte ...

  5. Highcharts 功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库

    http://www.hcharts.cn/index.php 暂无介绍,等待后续补充

  6. JS达到Web指定保存的和打印功能的内容

    背景 首先,说说文章的背景.近期手中的一个项目,因为需求中要求提供Web界面的打印功能.当然假设没有打印机,还能够提供保存到本地.项目组长把这个"小任务"分给了我.本着努力为组长分 ...

  7. android网页打印,安卓网页打印,h5页面打印,浏览器打印,js打印工具

    Android设备打印比较麻烦,一般设备厂商都提供原生app开发的SDK,我们web开发者为难了,不会原生开发啊 给大家提供一个思路,实现web加壳,利用打印浏览器实现 简单来说就是把我们的web页面 ...

  8. Jquery 页面打印

    <script src="~/Scripts/js/dist/jquery.jqprint-0.3.js"></script> <script typ ...

  9. web页面实现指定区域打印功能

    web页面实现指定区域打印功能 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="t ...

随机推荐

  1. python use dom to write xml file

    #encoding:utf-8 ''' write xml in dom style ''' from xml.dom.minidom import Document doc = Document() ...

  2. post 的body json要使用双引号,而不是单引号

      string parse error , JS eval error {'name' : 'wade' }   http://json.parser.online.fr/ string parse ...

  3. 使用git提交内容到网盘

    1.创建版本库(注意勾选纯版本库的选项) 2.客户端获取版本库代码 3.提交及获取 master是git默认的主要分支(主干),适合单人独自开发.多人开发时可以给每个人创建一个分支 参考资料: htt ...

  4. Objective-C学习备忘录:Clang编译器编译运行Objective-C代码

    我们都知道可以通过Apple公司的Xcode工具来学习Objective-C编程语言,但是能不能脱离XCode这个IDE进行Objective-C学习呢?当然是可以的.首先作为计算机科班出身的程序员都 ...

  5. jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  6. 个性化EDM数据营销的三大提醒

    EDM数据营销行业已经进入个性化时代.但是怎样实现个性化仍然是一个重大课题.国内领先的智能化邮件营销服务商Focussend一直致力于探索和研究邮件营销领域的先进知识和做法,旨在为企业和个人提供更多有 ...

  7. Offer_answer_with_SDP_rfc3264

    Network Working Group J. RosenbergRequest for Comments: 3264 dynamicsoftObsoletes: 2543 H. Schulzrin ...

  8. 二十、【.Net开源】EFW框架核心类库之WebService服务

    回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.1:http://pan.baidu.com/s/1qWJjo3U EFW框架实例源代码下载:http://pan.baid ...

  9. AndroidUI优化工具——HierarchyViewer

    先说些题外话,希望路过的各位支持,博主有幸成为2013年度博客之星的候选人,期待你的一票,谢谢. 投票猛击: http://vote.blog.csdn.net/blogstaritem/blogst ...

  10. MYSQL开发性能研究——INSERT,REPLACE,INSERT-UPDATE性能比较

    一.为什么要有这个实验 我们的系统是批处理系统,类似于管道的架构.而各个数据表就是管道的两端,而我们的程序就类似于管道本身.我们所需要做的事情无非就是从A表抽取数据,经过一定过滤.汇总等操作放置到B表 ...