1. Home
  2. Articles
  3. Web Design
  4. JavaScript
  5. jQuery
  6. Using jQuery, Javascript and HTML 5 Blob Object to Save HTML and Form Data
Read about HTML 5 Blob Object

Using jQuery, Javascript and HTML 5 Blob Object to Save HTML and Form Data

Published:

Share

Description

Found a solution to save a HTML document with form data and full HTML from a page using the HTML 5 Blob object, jQuery and some JavaScript.

Article

The Challenge

I was asked if I could create a local HTML page that contained a form. That was the easy part. Next the specification called to be able to save the page, including form data and allow the user to change the filename. Challenge accepted.

Writing the File

HTML 5 provides limited access to the file system. This alone, won't provide a solution to the challenge. But by utilizing the javascript filesaver library, the JavaScript Blob object, jQuery and jQueryUI... we can make this happen. Here are the important parts of the save.

<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script> myContent = "<html>" + document.documentElement.innerHTML + "</html>"; var myBlob = new Blob([myContent], {type: 'plain/text'}); saveAs(myBlob, 'filename.html');

Handling the Form Data

Now this only gets the page to save in its current rendered state. That means it won't be saving any form data that hasn't been written to the page. To address this issue, a combination of jQuery reads via selector.val(); and writes via selector.attr('value', value); will help. So before you write your blob, either write each value you want saved or loop through all the form fields and have their values written to the page. I created this function to do specific writes.

function setValue(element, value) { $('#txt' + element).val(value); if($('#txt' + element).is("textarea")) { $('#txt' + element).html(value); } else if($('#txt' + element).is("input")) { $('#txt' + element).attr('value', value); } };

Allowing User to Change Filename

By using the jQueryUI dialog and a custom form, you can prompt the user to enter a filename to save the render HTML as.

HTML

<div id="dialog" title="Save as..."> <label>Filename</label> <input id="txtSaveAs" type="input" placeholder="Filename.html" style="width: 100%;"> <p style="text-align: right;"><input id="btnSaveAs" type="button" value="Save"></p> </div>

jQuery

$(function() { $("#dialog").dialog({resizable: false, height: "auto", width: 400, modal: true, autoOpen: false}, 'Save As...'); $('#btnSave').click(function(){ $("#dialog").dialog("open"); }); $('#btnSaveAs').click(function(){ $( "#dialog" ).dialog( "close" ); myContent = "<html>" + document.documentElement.innerHTML + "</html>"; var myBlob = new Blob([myContent], {type: 'plain/text'}); saveAs(myBlob, $('#txtSaveAs').val()); }); });

Jobs done!

Author

Profile Picture of Bryan Myers - The Web Guy

Bryan Myers - "The Web Guy"

Advanced Digital Channel Engineer

Tags

  1. Articles discussing web related topics and technologies.Articles
  2. Articles about Web Design.Web Design
  3. Articles relating to JavaScript and its usage in website design and interactive development.JavaScript
  4. Learn more about jQueryjQuery

Related Articles

Go Back