Click here to Skip to main content
11,412,833 members (72,391 online)
Click here to Skip to main content

Embed PDFs into a Web Page with a Custom Control

, 27 Jan 2007
Rate this:
Please Sign up or sign in to vote.
Embed PDFs into a Web Page with a Custom Control


This article describes an approach to embedding and displaying PDF documents in a web page through the use of a simple ASP.NET 2.0 custom server control. The approach indicated herein allows the developer the opportunity to control the web page content surrounding the embedded PDF; this is in contrast to linking directly to a PDF which uses the entire web page to display PDF but does not otherwise permit the developer to control the appearance of the page.

Figure 1. Embedding and Displaying PDFs

Figure 2. Linking Directly to a PDF

Getting Started

There are two solutions included with this download, one is web custom control library containing a single custom control used to render out the PDF, the other is a test web site used to display a PDF through the use of the control.

Figure 3 (below) shows the solution explorer for the project. The project appearing at the top of the solution is the test web site, it contains only a single web page (default) and it includes a PDF file included for testing purposes. The bottom project is the web custom control library with the single control included (ShowPdf). The references in the test web site are per the default configuration; the custom control library references include the default references but also include:

Figure 3. Solution Explorer with Both Projects Visible

The Web Custom Control Project

Code: ShowPdf.cs

Within the web custom control project, there is a single custom control provided in this example. The example is entitled, ShowPdf.cs. The code for the project is very simple and should take very little time to implement. The control code starts out with the default imports:

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
    public class ShowPdf : WebControl

Following the imports is the namespace and class declaration. The class contains a single property called FilePath, and the attributes for the class assign the default property attribute to point to the single added property. What this accomplishes is simple, when the control is dropped into a web page or selected by the developer at design time, the property editor will default to select this property. The toolbox data attribute is setup for a custom server control (runat=server).

After the class declaration, a declarations region was added and a single local member variable was defined and included within that region. The local member variable is used to retain the path to the PDF document loaded into the control.


    privatestring mFilePath;


The next bit of code in the class is contained in a new region called Properties. Within this region is a single property entitled, FilePath. The property is used to provide public member access to the file path member variable. The attributes associated with this property indicate that the property is visible (Browsable) in the property editor, defines the property editor category under which to show the property in the editor, and provides the text used to describe the property which viewed in the property editor (Description). The editor defined specifies an association between this property and the URL Editor; when the developer using the control edits the property at design time, the URL editor will be displayed to allow the developer to navigate to and select a target file based using this editor. The System.Design reference is needed to support this portion of the design.

#region "Properties"

    [Category("Source File")]
    [Description("Set path to source file.")]

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

                if (tilde != -1)
                    mFilePath = value.Substring((tilde+ 2))
                    mFilePath = value;
    }   //
end FilePath property


Notice that in the set side of the property, the code is written to remove the tilde from in front of the file path if the tilde is present. If the tilde is left intact after setting the property to point to a file using the URL Editor, the tilde would otherwise be included in the HTML rendered to the page and the file would not found. It is necessary to strip this character from the file path in order to use the URL Editor to set this property at design time.

The last bit of code needed to finish the control is contained in a region called Rendering. This region contains a single method used to override the RenderContents method. Within RenderContents, a string builder is created and then populated with the HTML needed to render the control on a page. In this instance, the simplest way to display the PDF is through the use of an IFrame. Looking at the string builder, note that the IFrame contains the source property which points to the file path property added earlier in this project. Further, the width and height of the IFrame is set to equal the height and width of the control itself. After the string builder is populated, the content is dumped into a div. The entire control is constructed within a try catch block, if the try fails, the catch block will render out "Display PDF Control" into a box on the page in lieu of showing the control. When the control is first added to the page, it does not point to a file and so the try will fail, this prevents an error from occurring during that initial placement of the control.

#region "Rendering"

protected override void RenderContents(HtmlTextWriter
        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>



        // with no properties set, this will render
        // "Display PDF Control" in 
        // a box on the page


        writer.Write("Display PDF Control");

    }  // end try-catch

}   //

end RenderContents


The Test Web Project

Code: Default Page

The default page included in the web project is provided to serve as a test bed for the control. The page contains only a panel used as a banner, a hyperlink pointing directly to a PDF file, and the custom control with its file path property also pointing to the PDF. The PDF added to the web site content is also included in the web project. When this site is viewed, the control will display the PDF document in the defined area, selection of the hyperlink will open the same PDF into a separate window; I just included the hyperlink for comparison purposes.


This article demonstrates an approach that may be used to develop a custom control through which PDFs may be embedded into a web page. The purpose of the control is to allow the PDF to be included within a web page as opposed to the alternative of opening the PDF into a separate page where the PDF consumes the entire available display area and where the user cannot control the appearance of that page. Naturally, the code included in the custom control could be added directly into any page and the same effect could be achieved, however, by adding the code once into a custom control, the developer need only drop the control into the form and set the file path and dimensions to display PDFs without repeating the manual addition of the code each time it is needed.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Software Developer (Senior)
United States United States
No Biography provided

Comments and Discussions

SuggestionHow to implent this into your own project Pin
Member 11490634 at 2-Mar-15 1:12
memberMember 114906342-Mar-15 1:12 
GeneralMy vote of 5 Pin
Sibeesh KV at 7-Oct-14 2:22
professionalSibeesh KV7-Oct-14 2:22 
Questionunable to delete the pdf from front end Pin
ManishPatel76 at 15-Sep-14 23:04
memberManishPatel7615-Sep-14 23:04 
AnswerRe: unable to delete the pdf from front end Pin
ManishPatel76 at 3-Nov-14 20:34
memberManishPatel763-Nov-14 20:34 
Questionstream pdf content? Pin
lighthousekeeper at 29-Jul-13 7:54
memberlighthousekeeper29-Jul-13 7:54 
GeneralMy vote of 5 Pin
batime at 1-Feb-13 22:52
memberbatime1-Feb-13 22:52 
QuestionPassword protected pdf file Pin
maha_g at 15-May-12 23:42
membermaha_g15-May-12 23:42 
GeneralMy vote of 5 Pin
manoj kumar choubey at 25-Apr-12 0:40
membermanoj kumar choubey25-Apr-12 0:40 
GeneralShow pdf files from WS Pin
Maverick2009 at 3-May-11 2:14
memberMaverick20093-May-11 2:14 
QuestionHow do you close the .pdf file? Pin
ddaurio at 23-Nov-10 7:31
memberddaurio23-Nov-10 7:31 
GeneralMy vote of 5 Pin
Don_Hard at 11-Jul-10 3:56
memberDon_Hard11-Jul-10 3:56 
GeneralMy vote of 1 Pin
srini5474 at 11-Aug-09 12:18
membersrini547411-Aug-09 12:18 
QuestionHow to implement this custom control to my web page Pin
phamtasmic at 6-Aug-09 13:03
memberphamtasmic6-Aug-09 13:03 
Generalpdf opens in a seperate window Pin
ivandevan at 3-Aug-09 5:50
memberivandevan3-Aug-09 5:50 
QuestionHow to remove pdf Toolbar in browser Pin
emperor1 at 7-May-08 21:31
memberemperor17-May-08 21:31 
AnswerRe: How to remove pdf Toolbar in browser [modified] Pin
ETollenaar at 11-Sep-08 1:29
memberETollenaar11-Sep-08 1:29 
GeneralRe: How to remove pdf Toolbar in browser [modified] Pin
kdkllr at 28-Jan-14 8:25
memberkdkllr28-Jan-14 8:25 
Generalsimilar article in this site Pin
sivabalank at 19-Dec-07 20:32
membersivabalank19-Dec-07 20:32 
QuestionHow to disable Select option Pin
koonasaikumar at 2-Nov-07 6:47
memberkoonasaikumar2-Nov-07 6:47 
QuestionPDF Does Not Display Pin
Phantom208 at 27-Oct-07 12:16
memberPhantom20827-Oct-07 12:16 
AnswerRe: PDF Does Not Display Pin
Phantom208 at 27-Oct-07 13:42
memberPhantom20827-Oct-07 13:42 
GeneralRe: PDF Does Not Display Pin
Phantom208 at 29-Oct-07 10:00
memberPhantom20829-Oct-07 10:00 
GeneralExcellent Custom Control Pin
VenAliens at 18-Oct-07 11:00
memberVenAliens18-Oct-07 11:00 
QuestionPDF Viewer Pin
levienigma at 13-Sep-07 11:39
memberlevienigma13-Sep-07 11:39 
GeneralProgrammatically Print Pin
andrewkiss at 11-Sep-07 19:42
memberandrewkiss11-Sep-07 19:42 
GeneralRe: Programmatically Print Pin
andrewkiss at 12-Sep-07 0:53
memberandrewkiss12-Sep-07 0:53 
Generalchange iframe tag to object , and without ie messagebox to saving .pdf file after page loaded. [modified] Pin
Deemc at 31-Aug-07 15:11
memberDeemc31-Aug-07 15:11 
Questionchanging path from gridview Pin
renef79 at 8-Aug-07 4:13
memberrenef798-Aug-07 4:13 
AnswerRe: changing path from gridview Pin
miyukihj at 28-Jun-11 23:53
membermiyukihj28-Jun-11 23:53 
QuestionQuery on Embed PDFs into a Web Page with a Custom Control Pin
Govardhana Reddy at 20-Jul-07 7:28
memberGovardhana Reddy20-Jul-07 7:28 
NewsI have transtled it to Chinese and pubulised it! [modified] Pin at 2-Jul-07 18:25
member51aspx.com2-Jul-07 18:25 
QuestionProblem in VIewing PDF Pin
nareshgoradara at 22-Jun-07 0:51
membernareshgoradara22-Jun-07 0:51 
GeneralGreat Control Pin
gsimmons319 at 21-May-07 7:15
membergsimmons31921-May-07 7:15 
GeneralRe: Great Control Pin
salysle at 28-May-07 17:10
membersalysle28-May-07 17:10 
GeneralRe: Great Control Pin
gsimmons319 at 29-May-07 4:57
membergsimmons31929-May-07 4:57 
GeneralRe: Great Control Pin
salysle at 30-May-07 18:21
membersalysle30-May-07 18:21 
QuestionCan I set the Control to not write to the history Pin
Mark J Kilroy at 15-May-07 14:32
memberMark J Kilroy15-May-07 14:32 
AnswerRe: Can I set the Control to not write to the history Pin
salysle at 17-May-07 5:41
membersalysle17-May-07 5:41 

For your application, given the concern, have you considered opening the new page using Server.Transfer? That should prevent storing the path in the client url history.
GeneralRe: Can I set the Control to not write to the history Pin
Mark J Kilroy at 17-May-07 6:58
memberMark J Kilroy17-May-07 6:58 
GeneralRe: Can I set the Control to not write to the history Pin
salysle at 21-May-07 3:01
membersalysle21-May-07 3:01 
GeneralRe: Can I set the Control to not write to the history Pin
Mark J Kilroy at 21-May-07 6:00
memberMark J Kilroy21-May-07 6:00 
GeneralRe: Can I set the Control to not write to the history Pin
salysle at 28-May-07 17:08
membersalysle28-May-07 17:08 
GeneralFile names with spaces Pin
paul_beckett at 6-May-07 22:42
memberpaul_beckett6-May-07 22:42 
GeneralRe: File names with spaces Pin
salysle at 7-May-07 18:05
membersalysle7-May-07 18:05 
GeneralNice! Pin
pcthugnz at 7-Apr-07 20:34
memberpcthugnz7-Apr-07 20:34 
GeneralDynamic filepath Pin
flynnhicks03 at 6-Apr-07 6:45
memberflynnhicks036-Apr-07 6:45 
GeneralRe: Dynamic filepath Pin
salysle at 6-Apr-07 23:30
membersalysle6-Apr-07 23:30 
GeneralRe: Dynamic filepath Pin
flynnhicks03 at 9-Apr-07 4:51
memberflynnhicks039-Apr-07 4:51 
GeneralRe: Dynamic filepath Pin
Member 1390407 at 2-Sep-10 13:06
memberMember 13904072-Sep-10 13:06 
GeneralFile path problems Pin
greyrabbit at 2-Apr-07 13:13
membergreyrabbit2-Apr-07 13:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150427.1 | Last Updated 27 Jan 2007
Article Copyright 2007 by salysle
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid