lodop页面直接打印 水印 分页 套打

用lodop实现打印出并带水印和表格分页每页都显示表头功能。

1、什么是lodop

lodop取意自“load or print”,是一款优秀的Web打印控件,在开发中,传统打印控件总是“页面是什么就只能打印什么”,缺乏灵活性,使打印略显呆板。而使用lodop则可以做到“只看想看的、打印想打的”,不仅开发人员可以自由设置打印输出内容,用户还可对打印内容进行一系列调整。

1、lodop控件目前有简体中文、繁体中文、大五码(big5)和英文几个版本。

2、适用于IE系列浏览器、Firefox系列浏览器和IE内核浏览器(遨游、360、世界之窗、腾讯TT、搜狗等)等各类浏览器。

3、使用lodop作为WEB打印控件的优势:

(1)使用简单,易上手,引入LodopFuncs.js文件通过几个函数的调用就可以实现一项复杂打印任务的开发,极大地减少了打印功能开发量。

(2)网页中的任何内容都是打印输出时的裁减素材,使用JS语句将当前网页中某区域超文本显示在既定打印布局中输出,其在打印布局中的位置既可程序控制,也可由使用者在操作时调整。

(3)各类调整和打印设置等控制内容全部本地自动保存,彻底解决了一个大型软件工程项目中打印机类型繁杂时的精确套打问题。

(4)使用插件技术来实现WEB打印,插件安装方式不仅简单,而且成功率高。

(5)支持样式调整可以把页面显示在打印时调整样式使打印出来另一种效果。

1、下载lodop的demo和文档

从官网下载lodop解压后发现除了两个exe文件一个js文件其他的就是demo文件了。

(1)js文件是不可少的必须引入。

(2)在页面head之间加入发下代码:

<object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
	<embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed>
</object>

(3)打开LodopFuncs.js修改客户端exe文件路径,主要是href=‘install_lodop32.exe‘和href=‘install_lodop64.exe‘路径(lodop会根据浏览器是32或者64选用对应的安装文件)

(4)调用函数实现打印功能。直接看demo43实现了分页的功能。

function PreviewMytable(){
		var LODOP=getLodop();
		LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_分页打印综合表格");
		var strStyle="<style> table,td,th {border-width: 1px;border-style: solid;border-collapse: collapse}</style>"
		LODOP.ADD_PRINT_TABLE(128,"5%","90%",314,strStyle+document.getElementById("div2").innerHTML);
		LODOP.SET_PRINT_STYLEA(0,"Vorient",3);
		LODOP.ADD_PRINT_HTM(26,"5%","90%",109,document.getElementById("div1").innerHTML);
		LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
		LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
	    	LODOP.ADD_PRINT_HTM(444,"5%","90%",54,document.getElementById("div3").innerHTML);
		LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
		LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
		LODOP.NewPageA();
    		LODOP.ADD_PRINT_TABLE(128,"5%","90%",328,strStyle+document.getElementById("div2").innerHTML);
		LODOP.SET_PRINT_STYLEA(0,"Vorient",3);
		LODOP.ADD_PRINT_HTM(26,"5%","90%",80,document.getElementById("div4").innerHTML);
		LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
		LODOP.SET_PRINT_STYLEA(0,"LinkedItem",4);
		LODOP.ADD_PRINT_TEXT(460,96,"76.25%",20,"真诚祝您好远,欢迎下次再来!(发货单02的表格外“页脚”,紧跟表格)");
		LODOP.SET_PRINT_STYLEA(0,"LinkedItem",4);
		LODOP.SET_PRINT_STYLEA(0,"FontSize",12);
		LODOP.SET_PRINT_STYLEA(0,"FontColor","#FF0000");
		LODOP.SET_PRINT_STYLEA(0,"Alignment",2);
		LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
		LODOP.SET_PRINT_STYLEA(0,"Horient",3);
		LODOP.ADD_PRINT_HTM(1,600,300,100,"总页号:<font color='#0000ff' format='ChineseNum'><span tdata='pageNO'>第##页</span>/<span tdata='pageCount'>共##页</span></font>");

		LODOP.SET_PRINT_STYLEA(0,"ItemType",1);

		LODOP.SET_PRINT_STYLEA(0,"Horient",1);
		LODOP.ADD_PRINT_TEXT(3,34,196,20,"总页眉:《两个发货单的演示》");
		LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
		LODOP.PREVIEW();
	};

这里面的函数就不在解释lodop的文件说的非常详细。通过上面的代码就能实现表头固定和分页功能。而水印就比较简单了有两种方式:

(1)页面上设置背景这种方式最简单纯css。

(2)通过lodop函数设置位置来添加水印只需要加上如下代码

<span style="white-space:pre">	</span>LODOP. ADD_PRINT_SETUP_BKIMG("<img border='0' src='print_bg.gif' style='z-index: -1'/>");
	LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW",1);
	LODOP.SET_SHOW_MODE("BKIMG_PRINT",1);
	LODOP.SET_SHOW_MODE("BKIMG_LEFT",660);
	LODOP.SET_SHOW_MODE("BKIMG_TOP",950);

lodop页面直接打印 水印 分页 套打

时间: 2024-10-28 06:07:21

lodop页面直接打印 水印 分页 套打的相关文章

html模板生成静态页面及模板分页处理

它只让你修改页面的某一部分,当然这“某一部分”是由你来确定的.美工先做好一个页面,然后我们把这个页面当作模板(要注意的是这个模板就没必要使用EditRegion3这样的代码了,这种代码是Dreamwerver为了方便自己设计而弄的标识),把这个模板中我们需要改变的地方用一个与HTML可以区分的字符代替,如“{title}”.“[title]”.在生成静态页面的时候只需要把数据和这些字符串替换即可.这就是模板的含义了. 新建一个php页面和一个html页面[模板页];注:如果是从数据库调用数据,则

JavaScript和jQuery动态的数据html页面里的分页效果

我们从数据拿到消息想动态加载到html页面,这要设计到ajax,这里ajax就不在重新叙述了,现在只讲拿到数据后插入到页面中,并且动态的生成底部的翻页栏效果,用到jQuery库. 主要思路是这个样子的: ①拿到数据总的条数,根据每页放多少个,来生成按钮,切割数据. 首先老规矩,来个html代码: <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">

用Springboot+Jpa实现学生CRUD操作(含前端页面,含分页,自定义SQL)

在数据库中建student表 建包 1.编写entity包下实体类Student (一个Javabean规范) package com.example.stu.kudestu.stu.entity; import javax.persistence.*; @Entity @Table(name = "student") //@Entity 应用在实体类上 @Table(name = "student") 应用在实体类上,并且name属性为数据库表名 public c

JSP 页面实现数据分页

1 <%@ page import="java.sql.*" %> 2 <%-- 3 Created by IntelliJ IDEA. 4 User: lx_sunwei 5 Date: 14-1-4 6 Time: 下午5:45 7 To change this template use File | Settings | File Templates. 8 --%> 9 <%@ page contentType="text/html;cha

滚动到页面底部触发分页事件

最近写页面写不少东西,,好久没这么频繁写js了.废话不说了... 用户滑动页面,捕捉用户翻到页面底部时,触发事件. $(window).scroll(function () { var scrollTop = $(this).scrollTop(); // 页面卷上去的高度 var windowHeight = document.body.clientHeight; // 当前屏幕上页面的高度 var docHeight = $(document).height(); // 文档的高度 // 表

(Chrome42)Lodop页面总提示“未安装”或“请升级”的可能原因和解决办法

Chrome42之后版本,支持NP插件默认处于关闭状态,要手工打开,方法如下: 在谷歌浏览器地址栏输入: chrome://flags/#enable-npapi 然后找到"启用NPAPI"地方看到处于启用状态. 另外64位Chome不支持js方式访问NP插件,所以目前也不能使用lodop.

css控制页面打印(分页、屏蔽不需要打印的对象)

样式: <style   media="print">     .Noprint   {   DISPLAY:   none;}     .PageNext   {   PAGE-BREAK-AFTER:   always   }   </style> 注: ①.不需要打印的对象要用上“Noprint”样式. ②.需要换页处理的对象要用上“PageNext”样式. ③.因为最后一页不用加入换页符,所以要控制最后一页不要使用该样式.个人感觉用PAGE-BREAK-

WordPress实现长篇文章/日志/单页面分页功能效果

在WordPress里写文章,如果内容很多,你可能想要把文章分成几页来让访客浏览,这样既保持了网页的美观,也提高了网页的打开速度.但是在WordPress默认提供的按钮里,你可能找不到文章分页功能所对应的按钮,下面我就告诉大家如何使用文章分页功能. 在新版本版本的WordPress中,官方屏蔽了分页功能的快捷按钮,虽然我们可以通过修改源文件启用它,不过考虑到升级后它依然会失效而我又懒得写插件,这里我就不介绍如何恢复分页按钮了,我们不用它依旧可以进行文章分页. 1.首先我们要确认所使用的模版是否支

ISAPI实现静态页面后并用c#实现分页

1.isapi_rewrite可自行百度,用的是最新版 //配置好isapi后,需要注意的是32位有完全破解版的,64位的暂时没找到,具体可搜索百度,把页面放在iis上,并写页面的规则,以下是部分规则RewriteRule ^[/zhuanti/]+SubJectIndex.html /zhuanti/SubJectIndex.aspx RewriteRule ^[/zhuanti/]+SubJectBrand_([0-9]*)_([0-9]*).html /zhuanti/SubJectBra