使用自定义控件将 PDF 嵌入网页

• 下载源文件 - 71.7 KB

引言

本文介绍了一种通过使用简单的 ASP.NET 2.0 自定义服务器控件在网页中嵌入和显示 PDF 文档的方法。本文所示的方法允许开发人员控制嵌入式 PDF 周围的网页内容；这与直接链接到 PDF 不同，后者使用整个网页来显示 PDF，但不能让开发人员控制页面的外观。

入门

此下载包含两种解决方案，一种是包含单个自定义控件的 Web 自定义控件库，用于呈现 PDF；另一种是用于通过使用该控件显示 PDF 的测试网站。

图 3（下方）显示了项目的解决方案资源管理器。解决方案顶部出现的项目是测试网站，它只包含一个网页（默认），并且包含一个用于测试目的的 PDF 文件。底部项目是 Web 自定义控件库，其中包含一个控件（ShowPdf）。测试网站中的引用与默认配置相同；自定义控件库的引用包含默认引用，但也包括

System.Design

Web 自定义控件项目

代码：ShowPdf.cs

在 Web 自定义控件项目中，此示例中提供了一个自定义控件。该示例的标题是 *ShowPdf.cs*。该项目的代码非常简单，实现起来应该花费不了多少时间。控件代码以默认的导入开始

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace PdfViewer
{
    [DefaultProperty("FilePath")]
    [ToolboxData("<{0}:ShowPdf
        runat="server"></{0}:ShowPdf>")]
    public class ShowPdf : WebControl
    {

在导入之后是命名空间和类声明。该类包含一个名为 FilePath 的属性，类属性将默认属性设置为指向唯一添加的属性。这很简单，当控件被拖放到网页中或由开发人员在设计时选择时，属性编辑器将默认选择此属性。工具箱数据属性设置为自定义服务器控件（runat=server）。

在类声明之后，添加了一个声明区域，并在该区域内定义并包含了一个本地成员变量。本地成员变量用于保留加载到控件中的 PDF 文档的路径。

#region
"Declarations"

    privatestring mFilePath;

#endregion

类中下一段代码位于名为 Properties 的新区域中。在此区域中有一个名为 FilePath 的属性。该属性用于提供对文件路径成员变量的公共成员访问。与此属性关联的属性表明该属性在属性编辑器中是可见的（Browsable），定义了在编辑器中显示属性的属性类别，并提供了用于描述在属性编辑器中查看的属性的文本（Description）。定义的编辑器指定了此属性与 URL 编辑器之间的关联；当使用该控件的开发人员在设计时编辑属性时，将显示 URL 编辑器，允许开发人员使用此编辑器导航并选择目标文件。System.Design 引用是支持设计此部分所必需的。

#region "Properties"

    [Category("Source File")]
    true)>
    [Description("Set path to source file.")]
    [Editor(typeof(System.Web.UI.Design.UrlEditor), 
        typeof(System.Drawing.Design.UITypeEditor))]

    public string FilePath
    {
        get
        {
            return mFilePath;
        }
          
        set
        {
            if (value == string.Empty)
            {
                mFilePath = string.Empty;
            }
            else
            {
                int tilde = -1;
                tilde = value.IndexOf('~');

                if (tilde != -1)
                {
                    mFilePath = value.Substring((tilde+ 2))
                                     .Trim();
                }
                else
                {
                    mFilePath = value;
                }
            }
        }
    }   //

end FilePath property

#endregion

请注意，在属性的 set 语句中，代码编写为在文件路径前面如果有波浪号（~）则将其移除。如果在设计时使用 URL 编辑器将属性设置为指向文件后保留波浪号，则波浪号将包含在渲染到页面的 HTML 中，文件将找不到。为了在设计时使用 URL 编辑器设置此属性，有必要从文件路径中删除此字符。

完成控件所需的最后一段代码位于名为 Rendering 的区域中。此区域包含一个用于覆盖 RenderContents 方法的单个方法。在 RenderContents 中，创建一个字符串构建器，然后用渲染控件到页面所需的 HTML 填充它。在这种情况下，显示 PDF 的最简单方法是使用 IFrame。查看字符串构建器，请注意 IFrame 包含指向项目早期添加的文件路径属性的 source 属性。此外，IFrame 的宽度和高度被设置为等于控件本身的高度和宽度。字符串构建器填充后，内容将被转储到 div 中。整个控件是在 try catch 块中构建的，如果 try 失败，catch 块将在页面上的一个框中渲染出“Display PDF Control”而不是显示控件。当控件首次添加到页面时，它不指向任何文件，因此 try 将失败，这可以防止在控件的初始放置过程中出现错误。

#region "Rendering"

protected override void RenderContents(HtmlTextWriter
                                       writer)
{
    try
    {
        StringBuilder sb = newStringBuilder();

        sb.Append("<iframe src="
                  +FilePath.ToString() + " ");

        sb.Append("width=" +
                  Width.ToString() + " height=" + 
                  Height.ToString() + " ");

        sb.Append("<View PDF: <a
            href=" + FilePath.ToString() + "</a></p>
            ");

        sb.Append("</iframe>");
               
        writer.RenderBeginTag(HtmlTextWriterTag.Div);

        writer.Write(sb.ToString());

        writer.RenderEndTag();
    }
    catch
    {
               
        // with no properties set, this will render

        // "Display PDF Control" in 

        // a box on the page


        writer.RenderBeginTag(HtmlTextWriterTag.Div);

        writer.Write("Display PDF Control");

        writer.RenderEndTag();     
    }  // end try-catch


}   //


end RenderContents

#endregion

测试 Web 项目

代码：默认页面

Web 项目中包含的默认页面用作控件的测试平台。该页面只包含一个用作横幅的面板，一个直接指向 PDF 文件的超链接，以及自定义控件，其文件路径属性也指向 PDF。添加到网站内容中的 PDF 也包含在 Web 项目中。查看此网站时，控件将在定义的区域中显示 PDF 文档，选择超链接将把相同的 PDF 打开到一个单独的窗口中；我只是为了比较而添加了超链接。

摘要

本文演示了一种开发自定义控件的方法，通过该控件可以将 PDF 嵌入到网页中。该控件的目的是将 PDF 包含在网页中，而不是打开 PDF 到一个单独的页面，在那里 PDF 占据了整个可用显示区域，并且用户无法控制该页面的外观。当然，自定义控件中包含的代码可以直接添加到任何页面中，并达到相同的效果；但是，通过将代码一次性添加到自定义控件中，开发人员只需将控件拖放到表单中，然后设置文件路径和尺寸即可显示 PDF，而无需每次需要时重复手动添加代码。