Web系统页面打印技术实现与分析V1.0
如何使用前端框架实现网页打印功能
如何使用前端框架实现网页打印功能在现代互联网时代，网页打印功能已成为许多网站和应用程序所需的基本功能之一。
随着前端技术的不断发展和框架的出现，使用前端框架实现网页打印功能变得更加简单和高效。
本文将介绍如何使用前端框架来实现网页打印功能，以提供给用户更好的打印体验。
首先，我们需要选择一个适合的前端框架来实现网页打印功能。
目前主流的前端框架有React、Angular和Vue等。
这里我们以Vue为例进行介绍。
在Vue中实现网页打印功能的第一步是引入Vue的打印插件。
Vue有一些开源的打印插件可供选择，比如vue-print-nb、print-js等。
通过使用这些插件，我们可以简化打印功能的实现过程。
接下来，我们需要在Vue组件中定义打印按钮，并添加相应的方法来触发打印功能。
假设我们在一个名为PrintPage的组件中实现打印功能，可以按照以下步骤进行：1. 在PrintPage组件的模板中，添加一个打印按钮，使用Vue的事件绑定功能来触发打印方法。
```html<template><div><button @click="printPage">打印页面</button><!-- 页面内容 --></div></template>2. 在PrintPage组件的JavaScript代码中，定义printPage方法来实现打印功能。
在这个方法中，我们需要使用Vue的打印插件来实现实际的打印操作。
```javascript<script>import Vue from 'vue';import Print from 'vue-print-nb';export default {data(){// 页面数据},methods: {printPage(){// 设置打印参数const options = {title: '打印页面', // 打印页面的标题};// 调用打印插件进行打印e(Print);this.$print(this.$refs.page, options); // 使用$refs获取页面DOM元素}}</script>```在上述代码中，我们使用了vue-print-nb插件，并在printPage方法中调用this.\$print方法来实现实际的打印操作。
基于网络环境下Web页面输出技术的研究与设计
印输 出 只需 解 决 形 式 的 问 题 即可 。
ＸＭ Ｉ 主 要 通 过 样 式 表 解 决 了 数 据 的 文 本 样 式 规 范 ，
ＸＳ Ｔ技 术 的 解 决 方 案 ， 除 了 前 两 种 结 构 的 不 利 因 素 ， Ｌ 消 直接 将 内 容 与 表 现 分 离 ， Ｗｅ 在 ｂ环 境 下 直 接 打 印输 出 ， 高
效、 捷、 用。 快 易
图 １ 利 用 ＸＳＬ ＦＯ 实 现 的 刑 侦 技 术 文 本 输 出 过 程 —
显示 方式 进 行 独 立 描 述 。
ＸＭＬ（ ｔｎ ｉｌ ｒ ｕ ａ ｇ ａ ｅ 即可 扩 展 标 记 语 Ｅｘ ｅ ｓｂｅＭａｋ ｐＬ ｎ ｕ ｇ ）
言 ， 与 ＨＴＭＬ 一 样 ， 是 Ｓ 它 都 ＧＭ Ｌ（ ｔｎ ａｄ Ｇｅ ｅ ａｉ ｄ Ｓ ａ ｄ ｒ ｎ ｒｌ ｅ ｚ
Ｍａｋ ｐＩ ｎ ｕ ｇ ， 准 通 用 标 记 语 言 ） ｒ ｕ ． ｇ ａ ｅ 标 ａ 。ＸＭ Ｌ是 Ｉ ｔｒ ｅ ｎｅ ｎ ｔ 环境 中跨 平 台 的 ， 赖 于 内 容 的 技 术 ， 当前 处 理 结 构 化 依 是 文 档 信 息 的 有 力 工 具 。 ＸＭＬ与 ＨＴＭＬ 的 设 计 区 别 是 ： ＸＭＩ是 用 来 存 储 数 据 的 ， 在 数 据 本 身 。 而 ＨＴＭＬ是 用 重 来 定 义 数 据 的 ， 在 数 据 的 显示 模 式 。 重 由 于 ＸＭＬ具 有 的 文 档 内 容 与 结 构 分 离 的 特 征 ， 因此 系统 在设 计 数 据 文 本 时 ， 先 要 考 虑 数 据 与 结 构 的 分 离 。 首 根 据 数 据 文 本 生 成 对 应 的 ＸＭＬ 文 档 。数 据 模 板 作 为 描
web打印的几种方案
四 、使用PDF文件
用这种方式，就是从服务器端下载一个pdf文件流，在IE中用adobe插件打开，然后用adobe的打印菜单进行打印，虽然这种方案，也能实现精确套打，但需要下载adobe插件。这是国外报表工具经常推荐的一种打印方法，但在pdf不那么普及的中国，这种方案不是最好选择。
这里需要说明的是，“页面设置”中的各个值，是存储在用户的注册表中。
下面是 Microsoft Internet Explorer 访问打印设置的方式：
对于页边距，Microsoft Internet Explorer 首先尝试从以下注册表项中获取值：
Java代码
HKEY_CURRENT_USERSoftwareMicrosoftInternet ExplorerPageSetup
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" id=wb name=wb ></OBJECT>
<input type='button' value='打印' onclick='javascript:wb.ExecWB(6,1)'/>
在我们进行web开发的时候，通常会需要用到打印，然而，由于web技术的限制及考虑到安全的问题，一直以来，web打印的功能都是非常弱的，对此，我们也只能接受。也许你在开发过程中经常会遇见客户对你说，“你们系统的打印太差了，你看看excel的打印多好啊，”，面对这样的用户，我们除了苦笑，还能说什么呢？如果你对着他们去解释什么是BS架构，什么是CS架构，不但不能够解决问题，反而会招致用户的反感。
基于Web服务技术的个性化打印系统的设计与实现
序列化机制 的实现是依靠格式器 （ ｏ ａｅ） Ｆｒ ｔｒ ｍ ｔ
而完 成 的 ， 是 一 个 从 Ｓ ｓ ｍ． ｕ ｔ ｅ Ｓ ｒ ｌ ａ 它 ｙｔ Ｒ ｎｉ ． ｅｉ ｉ ． ｅ ｍ ａｚ ｔ ｎ Ｉｏ ａｔ 继 承下 来 的类 的对象 。格 式器 完 成 ｉ ．Ｆ ｒ ｔ ｒ ｏ ｍ ｅ
关键词 Ｗｅ ｂ服务技术 Ｔ ３６ Ｐ １ 序列 化技术 个性化打印系统 中图分类号
１ 引言
目 前多数应用软件能够有效地解决各企业 、 政 府和事业单位等信息化问题 ， 极大地提高 工作效
率， 尤其 是 计 算 机 技 术如 网络 技 术 、 ｂｅｖ ｅ技 Ｗｅｓｒｉ ｃ
得基 于 Ｗｅ ｅ ｉ ｓ的应用程序 具 备松 散耦 合 、 ｂＳｒ ｃ ｖ ｅ 面 向组 件 和跨 技术 实现 的特点 。
它 Ｗｅ 服务 、 ｂ 网页等不 必考虑部 署平 台、 实现语 言、 实现 方式 ， 可以 通过 接 口访 问该服 务 。 都
２ ２ 序 列化技 术 ． ２ ２ １ 序 列化 ．．
２ 相 关技 术
２ １ ｗ ｂ服务 ． ｅ
序列 化 （ｅｉｌａｏ ） 指将 需 要 保存 的数 Ｓｒ ｉ ｔ ｎ 是 ａｃ ｉ 据转 化成 能被存 储并传 输 的格式 的过程 ， 而它 的拟 过程则 可别 称为 反序列 化 （ ｅｅｉｌａｏ ） Ｄ ｓｒ ｉ ｔ ｎ 。 ａｚ ｉ
防
水
术等已经成熟 ， 使得企业的信息利用率和信息传输
速率 迅速提 高 ， 效地 实现 了基 于 Ｉｔｎｔ Ｂ 并有 ｎ ｒｅ 的 ／ ｅ
墙
ｓ Ｃ Ｓ的各种资源共享和重用 。 和 ／ 然而 ， 由于广 域 网 上 的系统 用 户 较 多 ， 印数 打
Web打印页面设置方法
Web打印页面设置方法
1. 打开浏览器的打印页面设置对话框，基本操作步骤为：文件→打印→页面设置，各种浏览器下略有差别。
以IE8为例，打开页面设置对话框的方法如图1和图2所示。
图1 打开页面设置对话框方法一
图2 打开页面设置对话框方法二
2. 页面设置对话框如图3所示。
图3 打印页面设置对话框
3. 为了得到更好的打印效果，一般建议将页眉和页脚设为“空”，左右边距设置为相同，这样打印出来的表格能够居中。
上下页边距可以保持默认，也可以根据需要进行适当调整。
如当一页打印不下时，可以通过修改上下边距使页面内容打印在一页上。
图4 设置页眉页脚和页边距。
基于网络环境下Web页面输出技术的研究与设计
基于网络环境下Web页面输出技术的研究与设计摘要：提出基于XSLT、XM等技术手段的解决方案，能够将文本的实现内容，同文本的表现形式分离，形成在Web页面下的打印输出格式，精确定位元素。
通过一个刑侦自动化信息系统例子进行详细说明。
关键词：Web；页面输出；XML；XSLT0 引言管理信息系统的架构有如下几类：传统的基于Fat Client的C/S（Client/Server）软件体系架构；基于Web的B/S(Browser/Server)或B/S/S(Browser/Application Server/DataBase Server)的软件体系架构。
在Internet广泛应用的大背景下，传统的C/S架构向B/S 架构转化时，程序页面元素输出的控制发生变化，使得开发者们需要更换理念来适应这种变化。
本文以刑侦自动化信息系统为例，介绍基于XML、XSLT 技术的解决方案，消除了前两种结构的不利因素，直接将内容与表现分离，在Web环境下直接打印输出，高效、快捷、易用。
1 具体实现在刑侦自动化信息系统中，信息的基本存储格式是ASCII 码和机内码，需要形成纸介归档。
系统的信息类型繁琐，需要采用不同的方式分别对信息内容本身和内容的显示方式进行独立描述。
将信息元素分成恒定静态元素和可变动态元素，设计表现模板。
表现模板又由若干要素构成，它定义了元素的基本结构。
数据由静态元素和动态元素两部分构成。
由于静态、动态元素的独立存储，在进行页面输出设计时，打印输出只需解决形式的问题即可。
XML主要通过样式表解决了数据的文本样式规范，文本的具体内容表现由XSL样式表定义，基于XSLT和XSL-FO技术，将初步形成的XML数据文档进行转换，形成最终的ADOBE Reader支持的PDF格式，这样很容易实现文本打印元素的精确定位输出。
完整的输出过程如图1所示。
包含的主要内容有：①XML文档的形成及表示；②数据输出样式XSLT和XSL-FO的定义；③PDF格式文档的页面数据输出。
基于Web的可视化套打功能的设计与实现
务完成套打 ， 文献 ［ ］ 用了 Ｅ Ｃ Ｌ来 实现 。另一类 是客户 端 ３使 ＸＥ 技术 ， 文献［ ］ 出了采用 Ａ ｐｅ 发送 打印控制 命令 实现定 位 ４提 ｐｌ ｔ
套 打 的 方 法 ， 献 ［ ］ 出 了一 种 在 浏 览 器 端 通 过 开 发 Ａ ｔ ｅ 文 ６提 ｅ ｖＸ ｉ
限于篇幅 ， 以上 只列 出修改模板 尺寸 和一个数 据项位置 的 ＪｖＳｒ ｔ ａａｃｉ 代码 ， ｐ 读者可根据需要在服务器端 动态生 成多个数 据 项 的相关代码 。所列代码 中通过下 划线标 出的 内容 ， 请用模 板 数据项表 中对应记录 的实际值填充 ， 同。 下 需要说明的是 ，ｒ ｔａ ｅ 元素 的 ｗｄ 、ｅｇｔ 式 的度 量 ｐｉ ｐｎｌ ｎ ｉｔ ｈｉ 样 ｈ ｈ
事先定义好 的事件处理代码从而与浏览者进行交互 。
１ ２ ＣＳ ． Ｓ
Ｃ Ｓ是 Ｃ ｓａ ｉ ｔｅＳ ｅｔ 层 叠 样 式 表 ） Ｓ ａｃｄｎ Ｓｉ ｈｅ （ ｇ ｌ ｓ 的缩 写 ， 由 国 是
插件实现 打 印项 目的精 确定 位 ， 而完 成 套 打 的方 案。文献 从
［］ ５ 提出了综合服务器端与客户端两种 技术 的实 现方案 。上述 两类方式的优点是打印定位精 度高 ， 对打 印机属性 的控制能力
属性值定 义为 １０ ， ０ ％ 以便 图片填充在整个模板 范围内。
项， 配合 Ｃ Ｓ的定义 ， Ｓ 可达到网页内不 同元 素精确定位 的效果 。
整个打印模板显 示在 ｉ ｄ为 ｐ ｎｐｎｌ ｉ ａ ｆ ｔ ｅ 的元 素 内， 模板 的 大 小通过该元素 的 ｗｄｈ ｈｉｈ 样 式来 定义 ， 该元 素 内使用 ＜ ｉ 、ｅ ｔ ｔ ｇ 在
３ ３ 通 过 Ｊ ｖ Ｓ ｒｐ 实现数 据项 的 鼠标拖 动定 位 ． ａ ａ ｃｉｔ
web1.0_2.0_3.0_介绍分析
5、精彩互 动的即时聊
天
6、完全展 现个性的平
台
存在的问题
Confidential
14
应用中存在的问题
WBE1.0
WEB2.0
WEB3.0
Confidential
应用中存在的问题
WEB1.0
WEB2.0 Confidential
WEB3.0
web1.0的本质是联合.
WEB1.0是互联网的初期，主要采用 HTML做的静态网页，功能主要用于宣传。 最大缺点是缺乏互动。
全新的人机对话时代使微信息之间可以互动整合的信息更加多元化更加人性化提供自动化的最优化资源组合智能化的搜索将成为人们未来生活中的主要方向人们需要的不是互联网上的所有信息仅仅是自己需要的信息应用中存在的问题在介绍web102030之前有必要提一下web在web之前internet上的信息只有文本形式
WEB1.0/2.0/3.0介绍
应用中存在的问题
WEB3.0
WEB2.0 Confidential
WEB1.0
1、投资过大：包括程序费、环境费及运维费； 2、灵活性、扩展性不强：功能升级、修改都要写程 序，而且一个功能的修改会涉及到其它功能的修改。 3、异构系统集成问题：异构语言开发的系统之间信 息共享、业务协同困难。
应用中存在的问题
Tag体现了群体的力量，使得内容之间的相关性和用户之间的交互性大大增强。
Web 3.0应用案例
1、动起来的网
所有内容都是可添加、可删除、可共享、可复制、可拖拽、可最大化、可最小化， 真正实现了人性化的设计，所有的操作和应用都是直接在网页上即可完成，大大提 高了您的工作和学习效率。(图中是阔地主页FLASH抓图)
Web1.0/2.0应用案例
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Web系统页面打印技术实现与分析V1.0目录1 WEB页面打印概述 (1)2 常用WEB页面打印方案 (2)2.1浏览器的打印功能 (2)2.2使用PDF文件 (2)2.3采用A PPLET方式 (3)2.4IEW EB B ROWSER+J A V ASCRIPT (3)2.5利用WORD或EXCEL来实现 (3)2.6使用第三方控件 (3)3 WEB打印控件介绍 (4)3.1S CRIPT X (4)3.2DLP RINTER (4)3.3墙外打印控件 (4)3.4L ODOP (5)3.5W EB P RINT（商业） (5)4 WEB页面打印应用实例 (6)4.1J A V ASCRIPT自带函数 (6)4.2IEW EB B ROWSER组件 (6)4.3通过E XCEL实现页面打印 (7)4.4使用S CRIPT X控件 (8)5 WEB页面打印技巧 (10)5.1隐藏打印的W EB元素 (10)5.2实现简单的页面局部打印 (12)5.2.1 Javascript实现 (12)5.2.2 WebBrowser实现 (12)5.3禁止出现页眉页脚 (14)1Web页面打印概述应用WEB化，不论对开发商，还是对用户来说，实在是一种很经济的选择，因为基于WEB的应用，客户端的规则很简单，容易学习，容易维护，容易发布。
在WEB系统中，打印的确是个烦人的问题。
要么自己开发打印控件，如果项目时间紧，肯定来不及。
这对程序员来说，因为浏览器的局限性，却要面对很多挑战。
怎么样来进行基于WEB的套打，就是这么一个令多数程序员头痛不已的问题。
基于WEB的套打，难度在于要将浏览器中呈现的HTML，精确地打印到票据中，而且能够实现对分页位置的控制。
本文将介绍常用的Web打印与套打方案，同时提供一些免费的打印控件，供大家学习参考。
2常用Web页面打印方案2.1浏览器的打印功能这种方案的优势是不需要对浏览器作任何扩充，是最简单的办法，但问题也最多，如：1. 不能精确分页。
浏览器一般是根据用户设置的页面大小，web页面的内容多少，来自行决定分页位置，程序员很难控制。
会有页脚页眉干扰。
2. 不能准确对齐边边距及打印文字。
3. 不能解决连续打印。
比如，不是仅打印一张票据，而是连续一次打印若干个票据。
2.2使用PDF文件用这种方式，就是从服务器端下载一个pdf文件流，在IE中用adobe插件打开，然后用adobe的打印菜单进行打印，虽然这种方案，也能实现精确套打，但需要下载adobe插件。
这是国外报表工具经常推荐的一种打印方法，但在pdf 不那么普及的中国，这种方案不是最好选择。
2.3采用Applet方式采用Applet方式，分页或精确打印，都可以做到完美，但缺点也很明显，表现在：1.安装Applet成本巨大。
需要下载十几M的文件。
Applet本身可能并不大，但运行Applet所需的jre一般至少10几M（jre1.4.2 ，15.45M）。
用户需要极大的耐心，来进行打印。
2.打印报表时，需要重新向服务器检索数据，效率低。
因为Applet方案，一般采用html方式呈现数据，打印时Applet必须向服务器检索同一张票据的数据，看上去，是打印了当前页的票据，实际上，Applet根本不会用当前html页的数据来打印，而是向服务器下载数据到Applet中来打印。
也就是说，打印的话，必须两次请求，一次html呈现，一次用来打印。
市场上java类的报表工具，一般推荐Applet方式来实现打印。
2.4IEWebBrowser+Javascript这实际上，是浏览器打印功能菜单的一种程序调用，与打印功能菜单没什么两样。
分页的问题仍然存在，只不过，可以让用户不用去点菜单，直接在网页中的一个按钮，或一个链接里面调用罢了。
2.5利用word或excel来实现先将需要打印的数据导入到word或者excel中，再利用word或者excel的打印功能来实现web打印。
2.6使用第三方控件这种方案就是下载一个控件，票据的数据不再以html方式呈现，而是呈现在ActiveX中。
这种方案的优点是打印的精确度高，分页的可控性好，但缺点也是很明显的，嵌入ActiveX控件破坏了web应用的整体html风格，且这样的控件比较大（一般超过1M），下载颇费时间）。
市场上的非java类报表产品，一般都采用这种方案。
3Web打印控件介绍3.1ScriptXScriptX是一个叫MeadCo的国外公司的产品，它分为基础版（免费）和高级版（收费），基础版可以对页眉，页脚，页边距，纸张方向进行设置。
高级版有一些额外的功能，由于是收费的，需要付费以后才能用到你系统中.3.2DLPrinterDLPrinter打印控件完全免费，界面大方、使用简单、但无签名，支持打印预览、直接打印，可设置页眉、页脚、页边距、打印份数、纸张大小等信息。
遗憾的是作者不知道是什么原因，从2007年至今没的更新。
作者博客：/Yahong111/下载地址：/panshenglu/DLPrinter.rar3.3墙外打印控件墙外打印控件(QWPrint)是一款小巧的打印辅助软件，能够帮助众多制作B/S 类程序的程序员更加灵活的控制客户端打印。
功能特点：1)小巧轻便，客户端在第一次使用时只要下载一个ActiveX控件即可使用。
2)控制多种打印设置。
程序员可以通过控件进行多项设置，包括设置打纸的页边距，页眉页脚，纸张大小等参数。
3)精确控制打印。
可以方便实现web下的套打操作。
作者博客：/下载地址：/panshenglu/墙外打印控件.rar3.4Lodop对于这个打印控件，用一个词来形容：强大！不仅调用方便，而且功能比你想像中要强大得多。
更多介绍大家到作者博客详细了解。
作者博客：/caoyanqingwebsite/下载地址：/panshenglu/lodop4.0.zip3.5WebPrint（商业）webprint使用简单,灵活.能满足绝大多数页面打印的需要.它内含一个在vc7.0上开发的ATL小控件（只有74k）,这个小控件主要实现对IE浏览器中文档打印格式的控制，可以定制打印纸型，纸张来源，打印方向，设置表头，表尾，表格，表格列宽，打印预览，分页，缩放等等用户经常关心的属性。
webprint使用户通过脚本可以控制自定义纸张，打印方向，页边距等等属性达到定制打印的目的，这些定制属性的设置不会改变IE浏览器的默认打印机属性。
也可以通过服务器端的页面调用WebPrint生成客户端的页面达到设置打印参数的目的。
技术特点：1)基于表格的页面打印解决方案2)采用了VC7.0开发的设置打印参数的小组件(仅75K)，实现打印纸张，方向，页边距等等的自定义。
3)采用了DHTML, 不仅实现分页，换页重新打印标题，表头表尾等等，而且还实现了精确的放缩功能。
4)因为将数据接口层定在标准的HTML元素这一层,所以适合所有在IE下运行的互联网程序,包括ASP JSP PHP和等等..5)使用简单方便,需要学习的东西很少.6)无须为webprint重新组织要打印的数据和样式,直接将显示的页面传入webprint即可实现数据和样式的打印.7)支持横向分页,分页时固定列重复打印.8)可以动态改变每页的标题.9)支持批打印,即一次打印多个打印作业.10)在同一个页面上可以打印多个报表.11)支持大数据量的打印.12)可以设置打印到某些行时强行分页.13)支持图片的打印.14)可以导出为Excel文件。
4Web页面打印应用实例4.1Javascript自带函数<a href="javascript:window.print();">打印</a>4.2IEWebBrowser组件详细介绍参考：/default.aspx?scid=kb%3BEN-US%3BQ267240#top /kb/q247671/#appliesto<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT><input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开><input name=Button onClick=document.all.WebBrowser.ExecWB(2,1) type=button value=关闭所有> <input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为> <input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印><input name=Button onClick=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印> <input name=Button onClick=document.all.WebBrowser.ExecWB(7,1) type=button value=打印预览> <input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置><input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性><input name=Button onClick=document.all.WebBrowser.ExecWB(17,1) type=button value=全选><input name=Button onClick=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新><input name=Button onClick=document.all.WebBrowser.ExecWB(45,1) type=button value=关闭> 4.3通过Excel实现页面打印将网页中数据导入excel中的方法有很多，这里先介绍一种，利用ActiveX 控件的方式，即Excel.Application, 这个控件是MS为excel提供的编程接口，在很多种编程语言种都可以通过该接口来操纵excel表格。