在项目开发中有时候会碰到要求打印页面中的数据的功能需求。需求原因主要有两点吧,一是需要打印的数据只是页面的一部分即页面的区域打印,比如只需要打印页面中表格里面选中的数据等,二是需要打印出来的样式和页面展示的样式有差别,比如需要将表格中的列竖着打印出来。

我在开发中主要用到的就是window.print()这个js函数,这个函数相当于在页面中右键打印那个功能,但如果直接使用这个函数会将整个页面打印出来。所以我们对页面数据的隐藏或者重写一个页面,得到我们想要打印的数据和样式。

1、隐藏不需要打印的数据

这种方式只能针对打印出来的样式和页面样式没什么差别的

贴代码

<style type="text/css" media="print">
/* 不需要打印的区域*/
.notPreview{
display: none;
}
</style>

  

然后调用window.print()即可

2、得到需要打印的数据,按照打印的样式,重写一个页面进行打印

先贴代码

bdhtml = window.document.body.innerHTML;
window.document.body.innerHTML = prnhtml;
window.print();
window.document.body.innerHTML = bdhtml;
window.document.location.reload();

  

在这个里面,bdhtml为原始的页面。prnhtml为真正调用右键打印的页面,需要根据实际情况进行拼接。在页面调用打印之后将页面恢复为原始页面,并reload,防止js函数不能正常使用。

在这之后还会遇到的问题 就是页眉、页脚、边距等这些了,这些实际上都是写在注册表里面的,所以需要修改注册表。

function PageSetup(name,value) {
try{
var HKEY_Path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
var Wsh = new ActiveXObject("WScript.Shell");
Wsh.RegWrite(HKEY_Path+name,value);
}catch(e){
alert("需要运行ActiveX才能进行打印");
}
}
PageSetup("header",""); // 页眉为空
PageSetup("footer","");//页脚为空
PageSetup("margin_left","0mm");//左边距为0
PageSetup("margin_top","0mm");//上边距为0

  


name 大致有这些:header(页眉),footer(页脚),margin_bottom(下边距),margin_left(左边距),margin_right(右边距),margin_top(上边距)

value的一些常用的大致有这些: &w 窗口标题 、&u 网页地址 (URL) 、&d 短日期格式(由“控制面板”中的“区域设置”指定)、&D 长日期格式(由“控制面板”中的“区域设置”指定) 、&t 由“控制面板”中的“区域设置”指定的时间格式 、&T 24 小时时间格式 、&p 当前页号 、&P 网页总数 、&& 单个 & 号 (&) 、&b 紧跟在这些字符之后的文本居中打印。 、 &b&b 紧跟在第一个 "&b" 之后的文本居中打印,跟在第二个 "&b" 之后的文本按右对齐方式打印。

大概能满足大部分的基本要求吧,我也是个了解的很浅,还请大家多多指教!

web 打印功能的更多相关文章

  1. lodop 控件实现web打印功能

    WEB套打可选方案不多,理想的更少,利用免费控件Lodop+JavaScript实现精确套打,算是较为经典的选择.这种方案其实比较简单,利用一个htm文件就可以实现模板设计过程,几乎是“空手套”式的开 ...

  2. 打印方案之web打印

    前言: 前一段时间在工作中,遇到需要通过打印实现对报表或者工作流清单等事情时,都需要运用到打印功能,那么 ,这个时候你会怎么处理? 在这里,我们可以通过最简单的方式实现web打印功能,简单易懂,方便快 ...

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

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

  4. JS实现Web网页打印功能(IE)

    问题描述:     JS实现Web网页打印功能 问题解决:     这里主要使用WebBrowser控件的ExeWB在IE中打印功能的实现 WebBrowser介绍:         WebBrows ...

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

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

  6. Web打印组件jatoolsPrinter

    应用web化,不论对开发商,还是对用户来说,实在是一种很经济的选择,因为基于web的应用,客户端的规则很简单,容易学习,容易维护,容易发布.但对程序员来说,因为浏览器的局限性,却要面对很多挑战.怎么样 ...

  7. Web打印--Lodop API

    Lodop是一款专业的WEB打印控件,其设计目标是简单易用.功能足够强大,开创WEB打印开发的新局面. Lodop设计者对WEB下的打印开发任务进行了分类汇总,高度抽象,设计出仅用几个功能函数,就可实 ...

  8. Web打印控件

    Lodop是什么? 有人说她是Web打印控件,因为她能打印.在浏览器中以插件的形式出现,用简单一行语句就把整个网页打印出来: 有人说她是打印编程接口,因为她介于浏览器和打印设备之间,是个通道和桥梁,几 ...

  9. Web打印控件smsx.cab使用说明

    在项目开发中,经常会用到页面打印的功能,在ASP.NET环境下推荐一款web打印控件smsx.cab.    使用方法:一般会先定义一个用于打印的母版页(Print.Master),在母版页上做好布局 ...

随机推荐

  1. 在 Azure Web 应用中创建 PHP 应用程序

    本分步指南将通过 Azure Web 应用帮助您启动并运行示例 PHP 应用程序.除 PHP 外,Azure Web 应用还支持其他语言,如 Java..NET.Node.JS.Python.Ruby ...

  2. python搭建本地服务器

    python搭建本地服务器 python3以上版本 'python3 -m http.server 8000' 默认是8000端口,可以指定端口,打开浏览器输入http://127.0.0.1:800 ...

  3. flex布局帮助你快速实现布局

    flex布局可以帮我们快速布局一些区块,实现你想要的效果,不用再去float,position之类的.我们在布局网页的时候很多时候都是一些特殊布局,flex就能帮我快速去布局,不需要去定位. 任何一个 ...

  4. 移动Web布局

    移动Web开发之移动页面布局 前言 本文针对手机设备设计的页面,并非兼容全设备的响应式布局,常见的MobileWeb页面如H5页面.手机页面.WAP页.webview页面等等.在不同尺寸的手机设备上, ...

  5. es6变量解构赋值的用途

    这里是我觉得es6解构赋值,在平时我们写js的时候非常有用,而且经常用到的地方,能简化我们的代码,让写代码简介优雅易读; 用途 1.交换变量的值,太方便了这逼,写法不仅简介而且一看就明白 let [x ...

  6. 使用canvas及js简单生成验证码方法

    在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点.验证码生成步骤是:1.生成一张画布canvas 2.生成随机数验证码  3.在画布中生成干扰线  4.把验证码文本填充到 ...

  7. IntelliJ IDEA热部署教程,只要两步!

    一.开启idea自动build功能1.File -> Settings -> Build,Execution,Deployment -> Compiler -> Build p ...

  8. OAuth2.0 入门与进阶

     一.基础知识 1.OAuth产生背景 很多网站.APP 弱化甚至没有搭建自己的账号体系,而是直接使用社会化登录的方式,这样不仅免去了用户注册账号的麻烦.还可以获取用户的好友关系来增强自身的社交功能. ...

  9. C++ 输出菱形

    输出*号组成的菱形: // print.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> ...

  10. Java环境路径配置--转载

    windows环境中JDK环境变量配置   一.环境准备 Windows10 jdk-9.0.1 二.下载并安装JDK 到Java的官网下载JDK安装包,地址:http://www.oracle.co ...