最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Save DOM as xml in a file with javascript - Stack Overflow

programmeradmin3浏览0评论

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
Add a ment  | 

2 Answers 2

Reset to default 5

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

Here is the process:

  1. give an elment to XMLSerializer to serialize to XHTML (which is valid XML).
  2. optionally remove the xhtml namespace using String.prototype.replace
  3. 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?

发布评论

评论列表(0)

  1. 暂无评论