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>
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>
Share
Improve this question
asked Apr 3, 2017 at 3:06
GiestGiest
4951 gold badge11 silver badges21 bronze badges
3
- Client-side JS or server-side (Node)? Regarding the formatting, there are some existing library functions for pretty-printing XML. – nnnnnn Commented Apr 3, 2017 at 3:09
- Would you be willing to accept an answer with JSON output instead of XML? JS has native ways of serializing to JSON but not XML – Rico Kahler Commented Apr 3, 2017 at 3:12
- I lied--there are native ways of serializing to XML using XMLSerializer. my answer uses it – Rico Kahler Commented Apr 3, 2017 at 3:48
2 Answers
Reset to default 5There'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 usingString.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/1999/xhtml"', '');
// 3.) use vkbeautify or your other favorite library to pretty print
console.log(vkbeautify.xml(xmlWithoutNamespace));
<script src="https://storage.googleapis./google-code-archive-downloads/v2/code.google./vkbeautify/vkbeautify.0.99.00.beta.js"></script>
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?