Save DOM as xml in a file with javascript

Question

In my javascript I have the following:

let person = document.createElement('person');
let name = document.createElement('name');
let surname = document.createElement('surname');
person.appendChild(name);
person.appendChild(surname);

let xml = person;

How do I save my "xml" variable in a file (using javascript only)? OBS: The content should not be presented in a single line, but in the tree structure:

<person>
    <name></name>
    <surname></surname>
</person>

Client-side JS or server-side (Node)? Regarding the formatting, there are some existing library functions for pretty-printing XML. — nnnnnn, Apr 03 '17 at 03:09
Would you be willing to accept an answer with [JSON output instead of XML](https://www.w3schools.com/js/js_json_xml.asp)? JS has native ways of serializing to JSON but not XML — Rico Kahler, Apr 03 '17 at 03:12
I lied--there are native ways of serializing to XML using [XMLSerializer](https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer). my answer uses it — Rico Kahler, Apr 03 '17 at 03:48

Rico Kahler · Accepted Answer · 2017-04-03T04:20:21.893

There's a very simple way to serialize your document to XML using XMLSerializer.

Here is the process:

give an elment to XMLSerializer to serialize to XHTML (which is valid XML).
optionally remove the xhtml namespace using String.prototype.replace
use vkbeautify to pretty print (no native way to pretty print)

let person = document.createElement('person');
let name = document.createElement('name');
let surname = document.createElement('surname');
person.appendChild(name);
person.appendChild(surname);

// 1.) use XMLSerializer
let xml = new XMLSerializer().serializeToString(person);

// 2.) remove xml namespace
let xmlWithoutNamespace = xml.replace(' xmlns="http://www.w3.org/1999/xhtml"', '');

// 3.) use vkbeautify or your other favorite library to pretty print
console.log(vkbeautify.xml(xmlWithoutNamespace));

<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/vkbeautify/vkbeautify.0.99.00.beta.js"></script>

@Kaiido thanks, i've updated it. the steps are simpler now. – Rico Kahler Apr 03 '17 at 04:20 — Rico Kahler, Apr 03 '17 at 04:20
Thanks for sharing. Excellent post! – Martin Pfeffer May 21 '17 at 10:39 — Martin Pfeffer, May 21 '17 at 10:39

score 1 · Answer 2 · edited May 23 '17 at 11:55

You can use .outerHTML to get string containing person node and child nodes, data URI representation of file, set a href of <a> element with download attribute set.

let person = document.createElement('person');
let name = document.createElement('name');
let surname = document.createElement('surname');
person.appendChild(name);
person.appendChild(surname);

let xml = `data:application/xml,<?xml version="1.0" encoding="UTF-8"?>${encodeURIComponent(person.outerHTML)}`;

console.log(person, xml);

window.onload = () => {
  let a = document.createElement("a");
  let filename = "xmlfile.xml";
  a.download = a.textContent =  "xmlfile.xml";
  a.href = xml;
  document.body.appendChild(a);
}

You can alternatively create a Blob or File instance representing XML data

let person = document.createElement('person');
let name = document.createElement('name');
let surname = document.createElement('surname');
person.appendChild(name);
person.appendChild(surname);

let xml = `<?xml version="1.0" encoding="UTF-8"?>${person.outerHTML}`;

let file = new File([xml]
           , "xmlfile.xml", {type:"application/xml"});

console.log(person, xml, file);

let url;

window.onload = () => {
  let a = document.createElement("a");
  let filename = "xmlfile.xml";
  a.download = a.textContent =  "xmlfile.xml";
  url = URL.createObjectURL(file);
  a.href = url;
  document.body.appendChild(a);
  a.onclick = () => {
    window.onfocus = () => {
      window.onfocus = null;
      URL.revokeObjectURL(url);
      if ("close" in file && !file.isClosed) file.close();
    }
  }
}

See also How to download a file without using <a> element with download attribute or a server?

Save DOM as xml in a file with javascript

2 Answers2