Products Technologies Demo Docs Blog Support Company

HTML5: Adding a Download Button to the Ribbon File Menu

A custom Download button in the Web.TextControl ribbon saves the document as PDF via SaveText and stores it in a session variable. JavaScript creates a hidden iframe requesting the same page with a query string, prompting the server to return the stored PDF as a binary download stream.

HTML5: Adding a Download Button to the Ribbon File Menu

In a recent post, we explained how to open a local document by uploading it to the server. This sample project shows how to add a Download button to the ribbon file menu that downloads the document as an Adobe PDF file.

HTML5: Adding a download button to the ribbon file menu

As in other samples, a hidden button is used that will be triggered inside an AJAX UpdatePanel to keep up the existing WebSocket connection. In the event handler, the document is saved using the SaveText method and temporary stored in a session variable. Finally, a client-side Javascript is injected to the DOM which creates a hidden IFRAME element that calls the same ASPX page with a separate HTTP context. This way, a post back is not required and the Web.TextControl won't be disconnected from the server.

// save the document as PDF in a session variable
byte[] data;
TextControl1.SaveText(out data,
    TXTextControl.Web.BinaryStreamType.AdobePDF);

Session["document"] = data;

// create a new IFRAME and call this ASPX with QueryString
// to load document from session data
ScriptManager.RegisterClientScriptBlock(
    this.Page,
    this.Page.GetType(),
    "alert",
    "var iframe = document.createElement('iframe');" +
        "iframe.src = 'index.aspx?download=1';" +
        "iframe.style.display = 'none';" +
        "document.body.appendChild(iframe);",
    true);

The dynamically added Javascript calls the index.aspx page again with the query string document=1. This jumps directly into the Page_Load event where the stored document from the session variable is returned to the hidden IFRAME that will open the document in the browser.

protected void Page_Load(object sender, EventArgs e)
{
    // execute only when loaded from IFRAME
    if (Request.QueryString["download"] == "1")
    {
        if (Session["document"] == null)
            return;

        // return the stored document
        Response.Clear();
        Response.ContentType = "application/pdf";
        Response.AddHeader("Content-Disposition",
            "attachment; filename=results.pdf");
        Response.BinaryWrite((byte[])Session["document"]);
    }
}

Download the sample from GitHub and test it on your own.

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

GitHub

Download and Fork This Sample on GitHub

We proudly host our sample code on github.com/TextControl.

Please fork and contribute.

Download ZIP

Open on GitHub

Open in Visual Studio

Requirements for this sample

  • Visual Studio 2012 or better
  • TX Text Control .NET Server (trial sufficient)

ASP.NET

Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.

ASP.NET Core
Angular
Blazor
JavaScript
React
  • Angular
  • Blazor
  • React
  • JavaScript
  • ASP.NET MVC, ASP.NET Core, and WebForms

Learn more Trial token Download trial

Related Posts

ASP.NETReportingGitHub

ASP.NET MVC: Implementing a Simplistic, Custom Button Bar

This ASP.NET MVC sample replaces the Web.TextControl ribbon bar with a custom button bar built in HTML, CSS, and JavaScript. Toggle buttons apply formatting commands like bold, while the…


ASP.NETReportingGitHub

ASP.NET MVC: Adding Protected Sections to Documents

SubTextParts in TX Text Control mark document regions as non-editable in Web.TextControl. An MVC controller method converts selected text into a SubTextPart using ServerTextControl, and…


ASP.NETReportingElectronic Signature

ASP.NET: Adding Electronic Signatures to Documents

An ASP.NET MVC sample demonstrates electronic signatures using an HTML5 canvas-based JavaScript signature pad. The captured signature image is sent to a controller action, which merges it into a…


ASP.NETGitHubHTML5

MVC: Loading Files from the Backstage Menu

An MVC partial backstage view lists available files from a directory using a simple document model. When a user clicks a file, JavaScript sends an AJAX request to an HttpPost controller method…


ASP.NETGitHubHTML5

MVC: Replace the File Menu with a Backstage View Menu

Replace the Web.TextControl File menu with a full-page backstage view using JavaScript and CSS. The tutorial disables the default FILE ribbon handler, renders a vertical navigation panel with…

Share on this blog post on: