Exporting or Downloading Client Side (Web Page) Content

Exporting or Downloading client side content into a file.

Normally we use server side content for downloading. Consider you have a table of data like a Grid and you need to export to excel. Yes, most of us go with a server side component which fetch the data from database and send it to the client side by setting some headers and Content-Disposition to let client/browser know that this is not for rendering rather for download.
On seeing such headers browser will show-up with a "Save" dialog.

What if you don't need you create a server side component (may be because the content is already in UI), here come the tricky part.

Before going into details, have anyone tried using any other URI Schema in 'href' attribute of an HTML anchor tag?

The magic or tricky part is, we have a special URI Schema named 'data'. Using this help to download the client content. For more details on 'data' URI schema, refer to Data URI Scheme

To know the fun part, click here to download a sample excel file.

Hope you like this information.

Before using this, refer to the above DATA URI link to see whether your browser is supported.