文档章节

JS实现Web中指定内容的保存与打印功能

ForingY
 ForingY
发布于 2015/12/07 16:01
字数 1536
阅读 71
收藏 2
点赞 0
评论 0

背景

首先,说说文章的背景。最近手中的一个项目,由于需求中要求提供Web界面的打印功能,当然如果没有打印机,还可以提供保存到本地。项目组长把这个“小任务”分给了我。本着努力为组长分忧解难的思想,领了任务之后,就马上开始了工作。

问题

刚开始的时候,组长给了一个工具(jatoolsprinter)让我研究,我用了一个多小时的时间,做出了一个简单的Demo,然后就是各种的测试,由于 web 打印需要浏览器安装 ActiveX 组件,在随后的测试中,我用了几款浏览器,甚至把安全级别都调到了最低的要求, ActiveX 组件的安装总是不成功,之后的几个小时也在一直调这个问题。终于,它打破了我耐心的底线,就这样被我“无情”的给抛弃了。

新大陆

吃过晚饭回来之后,我就开始走上了寻找新大陆的征途中,还好,我的运气不错,web 打印这个功能还是很常用的。很快我就有了一个新的解决方案。在简单的了解了一下官方的说明之后,找了一个文档看了看,这次我吸取了上次的教训,我先把官方提供的插件制作成了 CAB,而且马上就展开了测试,通过测试,我发现这一款工具在各版本浏览器的兼容性表现还是不错的,至于功能方面,我需要的他都提供了,而且额外的功能也是很多的,足够我们开发使用了。对了,不得不提的是,他对浏览器安装 ActiveX 组件还提供了另外一种方法,首先检测有没有安装插件,未检测到插件时,自动提示,并给出下载插件的地址,这里的插件使用的是 exe 格式的,这样就避免了浏览器安全设置的问题。

组件

  • 组件名称:Lodop(提供下载)

  • 需要引入的文件:lodop.cab(自己制作的)、LodopFuncs.js(必须的)、install_lodop32.exe(可选的,官方提供的exe格式插件)

  • 需要在页面中加入对象引用


点击安装之后,浏览器就会自动的安装,然后就可以看到下面的提示了。


实现

  • 首先是打印功能

html 代码

<span style="font-family:Microsoft YaHei;font-size:12px;"><html>  
<head>  
    <title>测试Web页面打印功能</title>  
</head>  
<style>  
   .title  
   {  
   font-family: Arial, Vernada, Tahoma, sans-serif;  
   font-size: 30px;  
   color: #00008B;  
   background-color: White;  
   text-decoration: underline  
   }  
   .normal  
   {  
   font-family: Arial, Vernada, Tahoma, Helvetica, sans-serif;  
   font-size: 14px;  
   color: #444444;  
   text-decoration: none;  
   line-height: 180%;  
   }  
   #page1 div  
   {  
   font-size: 12px;font-family:Arial;  
   }  
   .tab1{border:solid 1px #bbd4e8;}  
   .tab1 td,th {border:solid 1px #bbd4e8;font-size: 12px;font-family:Arial;line-height:21px;text-align:center}  
   .tab1 td.tdnumber{text-align:right}  
   .tab1 #lastPageFooter td,.tab1 #everyPageFooter td{text-align:left}  
   .tab1 .green {color:#090}  
   .tab1 .red{color:red}  
   #myEveryFooter,#myLastFooter{display:none;color:#0066cc;font-weight:700;background-color:#e8f2fe}  
   span.src{font-size:9pt;margin-left:100px;}  
</style>  
<object classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" codebase="lodop.cab#version=5,0,5,7" width=200 height=50 >  
</object><br/>  
<body>  
    <input type="button" value="打印预览" onClick="prn1_preview();">  
    <input type="button" value="直接打印" onClick="prn1_print();">  
    <input type="button" value="选择打印机" onClick="prn1_printA();">  
  
    <div id="form1" style="position:relative;width:227mm;height:80mm" autoBreakTable='dt_1'>  
        <table id="dt1" class="tab1" cellSpacing="0" cellPadding="0" style='border-collapse:collapse;width:683px;'  
               headerRows='2' everyFooter='myEveryFooter' lastFooter='myLastFooter'>  
            <caption style='font-size:36px;height:60px;font-family:Microsoft YaHei;color:#a7c0dc' class='first-only'>股票投资营收明细  
            </caption>  
            <thead class="h101">  
                <tr>  
                    <th style="padding: 0px; width: 32px; white-space: nowrap;" rowSpan="2">序号</th>  
                    <th style="padding: 0px; width: 62px; white-space: nowrap;" rowSpan="2"><a hideFocus="true" style="padding: 0px;"  
                                                                                               href="#" target="_self">股票代码</a></th>  
                    <th style="padding: 0px; width: 65px; white-space: nowrap;" rowSpan="2">股票简称</th>  
                    <th style="padding: 0px; width: 70px; white-space: nowrap;" rowSpan="2">相关资料</th>  
                    <th style="padding: 0px; width: 58px;" rowSpan="2"><a hideFocus="true" style="padding: 0px;" href="#"  
                                                                          target="_self">每股收<br>益(元)</a></th>  
                    <th style="padding: 0px; width: 196px;" colSpan="3">营业收入</th>  
                    <th style="padding: 0px; width: 193px;" colSpan="3">净利润</th>  
                </tr>  
                <tr>  
                    <th style="padding: 0px; width: 70px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">营业收入<br>(万元)</a>  
                    </th>  
                    <th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">同比增长<br>(%)</a>  
                    </th>  
                    <th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">季度环比<br>增长(%)</a>  
                    </th>  
                    <th style="padding: 0px; width: 66px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">净利润<br>(万元)</a>  
                    </th>  
                    <th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">同比增长<br>(%)</a>  
                    </th>  
                    <th style="padding: 0px; width: 62px;"><a hideFocus="true" style="padding: 0px;" href="#" target="_self">季度环比<br>增长(%)</a>  
                    </th>  
                </tr>  
            </thead>  
            <tbody>  
                <tr>  
                    <td>1</td>  
                    <td><a href="#">300184</a></td>  
                    <td><a href="#">力源信息</a></td>  
                    <td>  
                        <nobr> <a style="color: rgb(255, 0, 0);" href="#">详细</a> <a href="#">股吧</a>  
                        </nobr>  
                    <td class="tdnumber"><span>0.0600</span></td>  
                    <td class="tdnumber"><span>7225.38</span></td>  
                    <td class="tdnumber"><span class="red">15.69</span></td>  
                    <td class="tdnumber"><span class="green">-10.65</span></td>  
                    <td class="tdnumber"><span>563.83</span></td>  
                    <td class="tdnumber"><span class="red">79.25</span></td>  
                    <td class="tdnumber"><span class="red">90.00</span></td>  
                </tr>  
                <tr class="odd">  
                    <td>2</td>  
                    <td><a href="#">300094</a></td>  
                    <td><a href="#">国联水产</a></td>  
                    <td>  
                        <nobr> <a style="color: rgb(255, 0, 0);" href="#">详细</a> <a href="#">股吧</a>  
                        </nobr>  
                    <td class="tdnumber"><span>-0.0200</span></td>  
                    <td class="tdnumber"><span>38563.77</span></td>  
                    <td class="tdnumber"><span class="red">57.53</span></td>  
                    <td class="tdnumber"><span class="green">-12.89</span></td>  
                    <td class="tdnumber"><span>-871.34</span></td>  
                    <td class="tdnumber"><span class="red">70.47</span></td>  
                    <td class="tdnumber"><span class="red">93.48</span></td>  
                </tr>  
            </tbody>  
        </table>  
    </div>  
</body>  
</html></span>

js 代码

<span style="font-family:Microsoft YaHei;font-size:12px;"><script type="text/javascript" src="LodopFuncs.js"></script>  
<script type="text/javascript">  
    var LODOP; //声明为全局变量  
    // 打印预览  
    function prn1_preview() {     
        CreateOneFormPage();      
        LODOP.PREVIEW();      
    };  
    // 直接打印  
    function prn1_print() {       
        CreateOneFormPage();  
        LODOP.PRINT();    
    };  
    // 选择打印机  
    function prn1_printA() {          
        CreateOneFormPage();  
        LODOP.PRINTA();       
    };   
    // 创建打印页面  
    function CreateOneFormPage(){  
        LODOP=getLodop();    
        LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");  
        LODOP.SET_PRINT_STYLE("FontSize",18);  
        LODOP.SET_PRINT_STYLE("Bold",1);  
        LODOP.ADD_PRINT_HTM(10,20,500,5000,document.getElementById("form1").innerHTML);  
    };  
</script></span>

效果图

点击,打印预览之后,就会出现下面的效果:

当然,你还可以选择打印机,在打印预览里边也可以进入这个页面,只需要点击设置即可。

  • 然后是保存功能

  • html 代码相同,这里就不再重复贴了

  • 结束语

  • 怎么样,很简单吧!web 页面打印指定内容其实就这么简单。只要找对好的工具,什么都不是事!


© 著作权归作者所有

共有 人打赏支持
ForingY
粉丝 23
博文 252
码字总数 156129
作品 0
杭州
程序员
Unity网页数据交互基本原理

1. u3d是一个3D游戏引擎由于和编辑器集成在一起 所以也可以理解为一个制作/开发平台 2. u3d使用javascript C#作为核心脚本语言 来驱动整个游戏引擎 3. 平台可以发布为Exe执行文件或者打包为供...

qq_30279553 ⋅ 04/22 ⋅ 0

安卓应用安全指南 4.9 使用`WebView`

4.9 使用 原书:Android Application Secure Design/Secure Coding Guidebook 译者:飞龙 协议:CC BY-NC-SA 4.0 使你的应用能够集成 HTML / JavaScript 内容。 4.9.1 示例代码 我们需要采取...

apachecn_飞龙 ⋅ 03/24 ⋅ 0

AJAX基础之JavaScript基础与增强(一)

一、什么是JavaScript   JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现...

architect刘源源 ⋅ 05/08 ⋅ 0

Jerry和您聊聊Chrome开发者工具

Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用。不信? 用Chrome打开我们常用的网站,按F12,在Console标签页里看到这...

jerrywangsap ⋅ 04/16 ⋅ 0

DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

asp.net调用Lodop实现页面打印或局部打印,可进行打印设置或预览

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPrint.aspx.cs" Inherits="WebPrint" %>...

andrewniu ⋅ 05/24 ⋅ 0

JavaScript异步精讲,让你更加明白Js的执行流程!

JavaScript异步精讲,让你更加明白Js的执行流程! 问题点 什么是单线程,和异步有什么关系 什么是 event-loop jQuery的Deferred Promise 的基本使用和原理 async/await(和 Promise的区别、联...

推荐码发放 ⋅ 05/28 ⋅ 0

JavaScript 工作原理之六-WebAssembly 对比 JavaScript 及其使用场景

原文请查阅这里,略有改动,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland。 本系列持续更新中,Github 地址请查阅这里。 这是 JavaScript 工作原理的第六章。 现在,我们将会剖析...

tristan ⋅ 05/15 ⋅ 0

浅谈Node中module的实现原理

曾几何时,Javascript还没那么牛逼,几乎所有人都觉得它是用来做网页特效的脚本而已。彼时仓促创建出来的javascript的自身缺点被各种吐槽。随着web的发展,Javascript如今是媳妇熬成婆,应用...

xuerensusu ⋅ 05/21 ⋅ 0

JavaScript中的this指针 理论化this指针的定义

JavaScript现在应用之广泛,远超其他任何语言,只要是一个合格的网站应用,基本上多多少少都会有JS的存在。在JavaScript中,this的指向被不少Coder所不解,但其实JS中的this理解起来也是相当...

superwebmaster ⋅ 05/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Gitee 生成并部署SSH key

1.如何生成ssh公钥 你可以按如下命令来生成 sshkey: ssh-keygen -t rsa -C "xxxxx@xxxxx.com" # Generating public/private rsa key pair...# 三次回车即可生成 ssh key 查看你的 ...

晨猫 ⋅ 25分钟前 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部