Monday, June 4, 2012

How to configure a link to open/download documents in a website using ASP.NET and C#?

Sometimes we need to give/configure a link in our website to open and/or download facility of various types of documents like Microsoft documents(word, excel, power-point file), PDF file etc.

Here I will discuss 3 ways to open documents in a website and/or download a document from a website using ASP.NET and C#.

1. open document using iframe.
2. open document using HTTPResponse.
3. open document using Google doc viewer.


1. Open document using iframe.


    Inline frame or iframe is a window cut into your webpage that allows you to view another page on your site. It gives you the flexibility to render a specific portion without reloading entire page.


    ok. using this iframe you can view a document file including word, excel, power-point, pdf, text file and many more. One thing you need to remember that you must have document reader, installed at your client PC to open and read the document.


lets see how we can achieve this.

I assume that there is a folder FileStore at your website which holds all the document files.

1. add a new page.

2. at aspx page add an iframe.

        <iframe id="iframShowFiles" runat="server" height="600" width="800" frameborder="0">

        </iframe>

3. at cs page add the following code at page load event-


string fileName = Request.QueryString["FileName"] != null ? Request.QueryString["FileName"].ToString() : string.Empty;

        string surverUrl = Request.Url.AbsoluteUri.Split('/')[0] + "//" + Request.Url.Authority + Request.ApplicationPath.TrimEnd('/') + "/";
        string fileStoreLocation = "FileStore/";
        string downloadFilePath = surverUrl + fileStoreLocation + fileName;

        iframShowFiles.Attributes.Add("src", downloadFilePath);



now at the target aspx page add a link -


<a target="_blank" href="Default.aspx?FileName=Project-Food.xlsx">View file using iframe</a>


now tun the site.




2. Open document using HTTPResponse.


follow the following instruction:


1. In target aspx page add a hyperlink -


<asp:HyperLink ID="hypDownloadMyFile" runat="server" Text="View file using HTTPResponse"

            NavigateUrl=""></asp:HyperLink>

2. at cs page write the following code at page load event -


        string fileName = "Project-Food.xlsx";

     
        #region Download file using HTTpResponse

        hypDownloadMyFile.Attributes.Add("onclick", "javascript:DownloadFile();");

        hypDownloadMyFile.Attributes.Add("onmouseover", "this.style.cursor='pointer';this.style.color='red';");
        hypDownloadMyFile.Attributes.Add("onmouseout", "this.style.color='';");
        if (!Page.IsPostBack)
        {
            bool isDownloadFile = false;
            if (Request.QueryString["DownloadFile"] != null && Request.QueryString["DownloadFile"] == "1")
                isDownloadFile = true;

            if (isDownloadFile)

            {
                DownloadMyFile(fileName);
            }
        }

        #endregion



and this is DownloadMyFile method -



 private void DownloadMyFile(string fileName)

    {
        string fileStoreLocation = "~/FileStore/";
        string physicalPath = Server.MapPath(fileStoreLocation);
        string filePath = physicalPath + fileName;
        if (System.IO.File.Exists(filePath))
        {
            Response.ContentType = "application/octet-stream";
            Response.AppendHeader("Content-Disposition", "attachment; filename=" + fileName);
            Response.WriteFile(filePath);
            Response.End();
        }
    }


now run the site.





3. Open document using Google doc viewer.


   This is very interesting thing. Google introduces this document viewer. You do not need any document reader installed at client pc to open and read the document. The supported file types are:

  • Microsoft Word (.DOC and .DOCX)
  • Microsoft Excel (.XLS and .XLSX)
  • Microsoft PowerPoint (.PPT and .PPTX)
  • Adobe Portable Document Format (.PDF)
  • Apple Pages (.PAGES)
  • Adobe Illustrator (.AI)
  • Adobe Photoshop (.PSD)
  • Tagged Image File Format (.TIFF)
  • Autodesk AutoCad (.DXF)
  • Scalable Vector Graphics (.SVG)
  • PostScript (.EPS, .PS)
  • TrueType (.TTF)
  • XML Paper Specification (.XPS)
  • Archive file types (.ZIP and .RAR)
as per google Technical Documentation - Instructions for building your own URLs

All viewer URLs should use the path http://docs.google.com/viewer .

This path accepts two parameters:
1. url : The URL of the document to view. This should be URL-encoded.
2. embedded : If set to true , the viewer will use an embedded mode interface.

For example, if you wanted to view the PDF at the URL http://research.google.com/archive/bigtable-osdi06.pdf , you would use the URL:


http://docs.google.com/viewer?url=http%3A%2F%2Fresearch.google.com%2Farchive%2Fbigtable-osdi06.pdf


lets use a real life example:


1. Add a hyperlink into your target aspx page -


<asp:HyperLink ID="hypViewFileUsingGoogleDoc" runat="server" Text="View file using Google Doc"

            Target="_blank"></asp:HyperLink>

2. add the following code at cs page at page load event -


 #region Download file using Google Doc

   
        hypViewFileUsingGoogleDoc.Attributes.Add("onmouseover", "this.style.cursor='pointer';this.style.color='red';");
        hypViewFileUsingGoogleDoc.Attributes.Add("onmouseout", "this.style.color='';");
        string surverUrl = Request.Url.AbsoluteUri.Split('/')[0] + "//" + Request.Url.Authority + Request.ApplicationPath.TrimEnd('/') + "/";
        string fileStoreLocation = "FileStore/";
        string downloadFilePath = surverUrl + fileStoreLocation + fileName;
        hypViewFileUsingGoogleDoc.NavigateUrl = "http://docs.google.com/viewer?url=" + downloadFilePath;

        #endregion


now run the site.


If you found a screen like this -





Do not worry about this. Google cannot format and display the document from private file storage that are behind a firewall or on a local site that is accessed with a 'localhost' address.


Click on red font 'here' text. the document will download.


You can discover many more from the Google doc viewer.




That's all for now. Happy programming.. :)



3 comments:

  1. Thanks for your post

    Nahid

    ReplyDelete
  2. Whats up very nice website!! Man .. Excellent .. Wonderful .
    . I will bookmark your site and take the feeds also?
    I am satisfied to seek out so many helpful information right here within the publish, we want develop extra techniques on
    this regard, thank you for sharing. . . .

    . .

    my homepage; Five Star

    ReplyDelete