Data URLs with JavaScript

Data URLs (or URIs) are a practical way to create and embed new content into the browser. You simply write an encoded URL prefixed by data:, specify the content type and a supporting browser will show you the newly created content or ask you to download it (if it's a kind of content that a browser cannot handle natively). The sad truth about data URLs is that not all browsers support them properly. In fact, Internet Explorer's implementation differs greatly from Safari, Chrome, Opera and Firefox implementation.

Practical examples

Here are two functions I've written a couple of months ago to create data URLs with JavaScript. After creating a textarea element, to create an HTML document in a new browser window, just write this:

function createDataURL () {
 var quoteForm = document.getElementById("quote-form");
 var quoteText = document.getElementById("quote-text").value;
 var url = location.href;
 var dataURL = '<blockquote cite="' + location.href +'">' + '\n' + '\t' + '<p>' + quoteText + '</p>' + '\n' + '</blockquote>';
 var encodedURL = escape(dataURL);
 var p = document.createElement("p");
 p.className = "html";
 quoteForm.appendChild(p);
 var a = document.createElement("a");
 a.href = "data:text/html," + encodedURL;
 a.appendChild(document.createTextNode("View and save your quotation as HTML file"));
 p.appendChild(a);
}

window.onload = function () {
 var form = document.forms[0];
 form.action = "javascript:createDataURL();";
}

You can even create XML documents, just like this:

var xmlDoc = {
 prolog: "<?xml version='1.0' encoding='utf-8'?>",
 root_open: "<directory>",
 root_closed: "</directory>",
 contacts_open: "<contacts>",
 contacts_closed: "</contacts>",
 contact_open: "<contact>",
 contact_closed: "</contact>",
 first_name_open: "<first-name>",
 first_name_closed: "</first-name>",
 last_name_open: "<last-name>",
 last_name_closed: "</last-name>",
 email_open: "<email>",
 email_closed: "</email>"
}

function createDataURL () {
 var dataForm = document.getElementById("data");
 var firstName = document.getElementById("first-name").value;
 var lastName = document.getElementById("last-name").value;
 var email = document.getElementById("email").value;
 
 // assembling the data string
 
 var dataURL = xmlDoc.prolog + xmlDoc.root_open + 
        xmlDoc.contacts_open + xmlDoc.contact_open +
        xmlDoc.first_name_open + firstName +
        xmlDoc.first_name_closed + xmlDoc.last_name_open +
        lastName + xmlDoc.last_name_closed + xmlDoc.email_open +
        email + xmlDoc.email_closed + xmlDoc.contact_closed +
        xmlDoc.contacts_closed + xmlDoc.root_closed;
 // encoding data
 
 var encodedURL = escape(dataURL);
 
 
 var p = document.createElement("p");
 p.className = "xml";
 dataForm.appendChild(p);
 
 var a = document.createElement("a");
 a.href = "data:text/xml," + encodedURL;
 a.appendChild(document.createTextNode("View and save data as XML"));
 p.appendChild(a);
}

window.onload = function () {
 var form = document.forms[0];
 form.action = "javascript:createDataURL()";
}