使用 javascript 将 DOM 保存为 xml 文件答案

【问题标题】：Save DOM as xml in a file with javascript使用 javascript 将 DOM 保存为 xml 文件
【发布时间】：2017-04-03 03:06:45
【问题描述】：

在我的 javascript 中，我有以下内容：

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

let xml = person;

如何将我的“xml”变量保存在文件中（仅使用 javascript）？ OBS：内容不应单行呈现，而应以树状结构呈现：

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

【问题讨论】：

客户端JS还是服务器端（节点）？关于格式，有一些现有的库函数用于漂亮打印 XML。
您愿意接受JSON output instead of XML 的答复吗？ JS 有序列化为 JSON 的本机方式，但没有 XML
我撒谎了——有使用 XMLSerializer 序列化为 XML 的本地方法。我的答案使用它

标签： javascript xml dom

【解决方案1】：

有一种非常简单的方法可以使用XMLSerializer 将文档序列化为 XML。

流程如下：

为 XMLSerializer 提供一个元素以序列化为 XHTML（这是有效的 XML）。
可以选择使用String.prototype.replace 删除xhtml 命名空间
使用vkbeautify 进行漂亮打印（没有原生方式进行漂亮打印）

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));

&lt;script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/vkbeautify/vkbeautify.0.99.00.beta.js"&gt;&lt;/script&gt;

【讨论】：

@Kaiido 谢谢，我已经更新了。现在步骤更简单了。
感谢分享。很棒的帖子！

【解决方案2】：

您可以使用.outerHTML 获取包含person 节点和子节点的字符串，data URI 文件的表示，设置<a> 元素的href 和download 属性集。

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);
}

您也可以创建代表XML 数据的Blob 或File 实例

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();
    }
  }
}

另见How to download a file without using <a> element with download attribute or a server?

【讨论】：