web页面的打印

news/2024/11/14 14:21:37/

 第一种方法

css如下:
<style media="print">.Noprint { DISPLAY: none }</style>
将不要打印的地方放入<div>标记:
<div class=Noprint>
内容........
</div>

==================================================================================

《WEB打印的相关技术分析》

 

现有的Web打印控制技术分成几种方案

  自定义控件完成打印

  利用IE自带的WebBrowser控件实现打印

  利用第三方控件实现打印

以下主要谈前两个方面的内容

 

一、        自定义控件方式

自定义控件方式就是利用VB或VC等工具生成COM组件,用定义好的打印格式来分析打印源文件从而实现打印。只有将生成的组件下载并注册到客户机上,才能实现在客户端的打印。

难点主要是定义打印格式、如何来分析打印源文件。现有的比较好的方法是利用XML技术来全面的解决问题,利用XML可以非常容易地定义打印目标的文本、表格等内容的格式。但对程序员的开发要求高,难度比较大。

 

二、        利用WebBrowser实现Web打印

WebBrowser是IE内置的浏览器控件,无需用户下载。本文档所讨论的是有关IE6.0版本的WebBrowser控件技术内容。与其相关的技术要求有:打印文档的生成、页面设置、打印操作的实现等几个环节。

 

(一)、        打印文档的生成

1、        客户端脚本方式

客户端脚本分为VBScript、JavaScript、JScript几种脚本语言。在IE下开发应用使用的语法为JScript的语法,由于它和JavaScript几乎没有什么区别,所以也可以称其为JavaScript(下面简写为JS)。一般情况下,主要使用JS来实现DOM文档的分析,DOM为微软提出的一种Web文档模型,主要用来实现Web脚本编程。

利用JS可以分析源页面的内容,将欲打印的页面元素提取出来,实现打印。通过分析源文档的内容,可以生成打印目标文档。

 

优点:客户端独立完成打印目标文档的生成,减轻服务器负荷;

缺点:源文档的分析操作复杂,并且源文档中的打印内容要有约定;

 

2、        服务器端程序方式

服务器端程序方式,主要是利用后台代码从数据库中读取打印源,生成打印目标文档。当的页面生成时,还应适当考虑使用CSS来实现强制分页控制。

 

优点:可以生成内容非常的丰富的打印目标文档,目标文档的内容的可控性强。由于打印内容是从数据库中获取的,所以生成操作相对简单;

缺点:服务器端负载比较大;

 

(二)、        页面设置

页面设置主要是指设置打印文档的页边距、页眉、页脚、纸张等内容。页面设置将直接影响到打印文档版面的生成效果,所以它和打印文档的生成有着密切的关系。比如:表格的行数、大小、位置、字体的大小等。

现有的技术是利用IE6.0内置的打印模板方式来控制页面设置,其可以对打印目标文档产生非常大的影响。打印模板可以控制页边距、页眉、页脚、奇偶页等内容,并可以将用户的设置取得,还可以将设置发送到服务器端。

打印模板技术可以自定预览窗口和打印格式,最大限度地影响目标文档和打印效果。

 

(三)、        打印操作的实现

此功能的实现主要是利用WebBrowser控件的函数接口来实现打印、打印预览(默认的)、页面设置(默认的)。

<object ID='WebBrowser1' WIDTH=0 HEIGHT=0

CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'>

//打印

WebBrowser1.ExecWB(6,1);

//打印设置

WebBrowser1.ExecWB(8,1);

//打印预览

WebBrowser1.ExecWB(7,1);

 

三、        本项目采用的打印方案

服务器端程序方式、打印预览接口调用,下面为例,主要参考项目中的:pageErrorPrint.aspx.vb文件

主调用页

function PrintPage(iPageIndex,strQuery)

{

var strURL;

strURL = "PageErrorPrint.aspx?PageIndex=" + iPageIndex + "&QueryString=" + strQuery;

winPrint=window.open(strURL,"","left=2000,top=2000,fullscreen=3");

}

 

打印页HTML源中的预览控制

<SCRIPT language="javascript">

document.write("<object ID='WebBrowser' WIDTH=0 HEIGHT=0

CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>");       

WebBrowser.ExecWB(7,1);

window.opener=null;

window.close();

</SCRIPT>

 

 

程序头

'首先声明表格容器

Protected WithEvents phContainer As System.Web.UI.WebControls.PlaceHolder

'每个表格中的记录数量

Private Const ItemPerTable As Integer = 20

 

 

关键的实现部分

'创建一个符合打印要求的表格

tabPagePrint = NewPrintTable()

'将表头添加到此表格中

Call AddTableTitle(tabPagePrint)

 

'初始化记录器

i = 0

iItemIndex = iStartPoint

For Each clsItem In clsAllData.ErrorCollection

    If i > 0 And i Mod ItemPerTable = 0 Then

        '添加表格控件到页面中

        phContainer.Controls.Add(tabPagePrint)

        '在页面中添加一个换行符

        Call AddPageBreak()

 

        '创建新一轮的表格

        tabPagePrint = NewPrintTable()

        Call AddTableTitle(tabPagePrint)

    End If

 

    '将记录添加到表格中

    Call AddItemToTable(iItemIndex, tabPagePrint, clsItem)

    iItemIndex = iItemIndex + 1

    i = i + 1

Next

 

'添加表格控件到页面中

phContainer.Controls.Add(tabPagePrint)

 

 

支持函数

'功能:添加页的换行符

Private Sub AddPageBreak()

    Dim ltBreak As LiteralControl

 

    ltBreak = New LiteralControl("<p style='page-break-before:always'>")

    phContainer.Controls.Add(ltBreak)

End Sub

 

'功能:创建一个符合打印要求的表格

Private Function NewPrintTable() As Table

    Dim tabSrc As New Table()

 

    tabSrc.Width = Unit.Percentage(100)

    tabSrc.Attributes("border") = "1"

    tabSrc.CellPadding = 4

    tabSrc.CellSpacing = 0

    tabSrc.BorderWidth = Unit.Pixel(2)

    tabSrc.BorderColor = Color.Black

    tabSrc.Style.Add("FONT-SIZE", "12px")

    NewPrintTable = tabSrc

End Function

 


http://www.ppmy.cn/news/682788.html

相关文章

js打印网页功能大全

js打印 Javascript网页打印大全 普通打印&#xff08;整页打&#xff09; 打印网页内部分内容&#xff08;自定义&#xff09; 打印去掉/添加页眉页脚 使用外部控件/方法实现多功能打印 打印背景 以上为代码控制 设置“页面设置”实现打印参…

jquery.jqprint网页打印插件

下载地址 jquery.jqprint是一款网页打印插件&#xff0c;使用很方便。 dd:

html 页面的打印

web页面的打印 window.print() $(#dayin).click(function(){ $(#dayin).css(display,none) $(.classroom).css(display,none) $(.open).css(display,none) $(.open1).css(display,none) $(#button).css(display,none) $(.mui-action-back).css(display,none) $(header).css(d…

前端打印HTML页面

情况&#xff1a;打印特定的HTML内容 代码&#xff1a; 如果直接调用window.print()的话&#xff0c;会将tiltle或者访问的路径打印出来&#xff0c;所以要替换&#xff08;也可以打印特定内容&#xff0c;通过ID获取&#xff0c;然后拼接为特定的网页内容&#xff09; func…

浏览器打印,Chrome网页打印中的宽度控制

Chrome可直接将网页保存&#xff08;打印&#xff09;为PDF&#xff08;无需安装Adobe&#xff09; Chrome在保存为PDF文件时&#xff0c;默认纸张大小是A4。若布局为纵向&#xff0c;显示大小为210mm297mm&#xff1b;若布局为横向&#xff0c;显示大小为297mm210mm。 Windo…

JS 网页打印解决方案

这些日子真是太忙了&#xff0c;项目太多了公司总是加班&#xff0c;而且这些项目中好多都用到的打印&#xff0c;所以学习了一段时间js的打印。 其实原来只是用到了简单的功能&#xff0c;现在要深入的了解才发现原来ie的网页打印也是如此的强大。 以下是我在网上摘录的js打…

前端实现打印html页面

前端打印页面内容 确认打印布局打印预览排版去掉打印页眉页脚调用打印方法 确认打印布局 打印方法是打印body里面的数据&#xff0c;如果想打印部分数据&#xff0c;则需要将打印布局放在body里面&#xff0c;或者将不需要的布局隐藏。 将布局渲染到body会导致页面重新渲染&am…

前端web打印

前端打印 一、Vue打印插件 第一种方法&#xff1a;通过npm 安装插件 1&#xff0c;安装 npm install vue-print-nb --save 2&#xff0c;引入 安装好以后在main.js文件中引入 import Print from vue-print-nbVue.use(Print); //注册   3&#xff0c;现在就可以使用了 &…