65.9K
CodeProject 正在变化。 阅读更多。
Home

在 ASP.NET 中动态创建打印预览页面

MJ Ferdous
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.65/5 (66投票s)

2006 年 4 月 15 日

CPOL

2分钟阅读

viewsIcon

714164

downloadIcon

20036

本文介绍如何使用 JavaScript 代码动态创建打印预览页面。 你不需要创建任何 ASPX 页面来查看打印预览，并且你还可以打印打印页面的任何部分。

Sample Image - PrintPreview1.gif

Sample Image

引言

如果你想在打印任何页面之前显示打印预览页面，那么你必须创建一个像当前正在显示的页面。

或者，如果你想打印该页面的特定部分，例如仅仅一个 DataGrid，HTML 表格或任何其他部分，并且你还需要在打印之前在单独的页面中预览它，你必须创建一个单独的打印预览页面来显示，这对你来说更加困难。

我介绍了一种避免此问题的技术。 你不需要为打印预览创建一个单独的页面。 你只需在 Script.js 中使用 JavaScript 代码来动态创建打印预览页面。 这样做需要的时间更少，因此速度更快。 希望它对你有所帮助。

背景

我正在我现有的项目中开发一个报表模块。 报表内容是通过给出输入（例如按状态、日期范围等生成）动态生成的。并且有一个打印按钮用于打印。 我的客户希望在打印前查看打印预览页面，但是我们已经完成了该模块。 对我的开发人员来说，为所有报表构建打印预览页面确实是一个非常困难的情况。 在那种情况下，我得到了这个想法。

使用代码

你只需将 Script.js 文件添加到你的项目中。 以下代码已写入该文件。

源代码

//Generating Pop-up Print Preview page
function getPrint(print_area)
{
    //Creating new page
    var pp = window.open();
    //Adding HTML opening tag with <HEAD> … </HEAD> portion 
    pp.document.writeln('<HTML><HEAD><title>Print Preview</title>')
    pp.document.writeln('<LINK href=Styles.css type="text/css" rel="stylesheet">')
    pp.document.writeln('<LINK href=PrintStyle.css ' + 
                        'type="text/css" rel="stylesheet" media="print">')
    pp.document.writeln('<base target="_self"></HEAD>')

    //Adding Body Tag
    pp.document.writeln('<body MS_POSITIONING="GridLayout" bottomMargin="0"');
    pp.document.writeln(' leftMargin="0" topMargin="0" rightMargin="0">');
    //Adding form Tag
    pp.document.writeln('<form method="post">');

    //Creating two buttons Print and Close within a HTML table
    pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right>');
    pp.document.writeln('<INPUT ID="PRINT" type="button" value="Print" ');
    pp.document.writeln('onclick="javascript:location.reload(true);window.print();">');
    pp.document.writeln('<INPUT ID="CLOSE" type="button" ' + 
                        'value="Close" onclick="window.close();">');
    pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');

    //Writing print area of the calling page
    pp.document.writeln(document.getElementById(print_area).innerHTML);
    //Ending Tag of </form>, </body> and </HTML>
    pp.document.writeln('</form></body></HTML>'); 
}

getPrint(print_area) 函数接受你要打印的部分的 DIV ID。 然后，它创建一个新的页面对象并写入必要的 HTML 标签，然后添加“打印”和“关闭”按钮，最后，它写入 print_area 内容和结束标签。

从你的 ASPX 页面调用以下代码。 在这里，已添加 getPrint('print_area') 用于打印 print_area DIV 部分。 print_area 是 DataGrid 的 DIV ID，另外两个将适用于其他 DIV。 你要打印的任何区域都必须在 DIV 标签内定义。 还要在 ASPX 页面中包含 Script.js 文件。

'calling getPrint() function in the button onclick event
btnPrint.Attributes.Add("Onclick", "getPrint('print_area');")
btnTablePP.Attributes.Add("Onclick", "getPrint('Print_Table');")
btnPagepp.Attributes.Add("Onclick", "getPrint('Print_All');")

下载源代码以获取 getPrint() 函数。

我已在演示项目中使用以下代码来生成示例 DataGrid

Private Sub PopulateDataGrid()
    'creating a sample datatable
    Dim dt As New System.Data.DataTable("table1")
    dt.Columns.Add("UserID")
    dt.Columns.Add("UserName")
    dt.Columns.Add("Phone")
    Dim dr As Data.DataRow
    dr = dt.NewRow
    dr("UserID") = "1"
    dr("UserName") = "Ferdous"
    dr("Phone") = "+880 2 8125690"
    dt.Rows.Add(dr)
    dr = dt.NewRow
    dr("UserID") = "2"
    dr("UserName") = "Dorin"
    dr("Phone") = "+880 2 9115690"
    dt.Rows.Add(dr)
    dr = dt.NewRow
    dr("UserID") = "3"
    dr("UserName") = "Sazzad"
    dr("Phone") = "+880 2 8115690"
    dt.Rows.Add(dr)
    dr = dt.NewRow
    dr("UserID") = "4"
    dr("UserName") = "Faruk"
    dr("Phone") = "+880 2 8015690"
    dt.Rows.Add(dr)
    DataGrid1.DataSource = dt
    DataGrid1.DataBind()
End Sub

在单独的样式表页面中使用以下代码。 如果你想在打印期间隐藏“打印”和“关闭”按钮，请参阅 PrintStyle.css。

#PRINT ,#CLOSE
{
    visibility:hidden;
}

关注点

我在打印过程中遇到了一个问题。 第一次单击时打印不起作用。 我通过在该页面上使用 location.reload(true); 重新加载解决了该问题。

修订历史

  • 4-19-2006:
    • 第二次修订。 整合了读者的评论：充实了几个概念，修改了一些部分（对不起 BigJim61，我认为我现在在我的文章中讨论了更多内容）。
  • 4-17-2006:
    • 第一次修订。 添加了一个新部分。
  • 4-15-2006:
    • 原始文章。
© . All rights reserved.