读取xml文件，修改值/添加元素/属性，如何保存xml ?

Using javascript, I want to read xml file from the disk, modify the values/add elements/attributes and save the xml back to disk.

使用javascript，我希望从磁盘读取xml文件，修改值/添加元素/属性，并将xml保存回磁盘。

Anyone knows here can i find examples that works with IE and Firefox? I allready find examples to read, now changing values that's the problem.

有人知道我能找到与IE和火狐兼容的例子吗?我已经找到了要阅读的例子，现在的问题是改变值。

Thanks

谢谢

1 个解决方案

#1

Assuming you are trying to read and write to disk from the browser and not node.js, the first step is to use an input tag of type file to get access to the file system.

假设您正在尝试从浏览器而不是节点读写磁盘。第一步是使用类型为file的输入标记来访问文件系统。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="file" id="input" accept="text/xml">
  <script src="script.js"></script>
</body>

As soon as a file is selected we want to extract the blob from the element. A good moment to do that is during the change event.

一旦选择了一个文件，我们就想从元素中提取blob。一个很好的时机是在更改事件期间。

const input = document.querySelector('#input');

input.addEventListener('change', () => {
  const file = input.files.item(0);
});

There is more than one way to parse the blob into a tree of elements. Here I took advantage of the fact that the browser parses xml documents in HTTP requests.

有多种方法可以将blob解析为元素树。这里我利用了浏览器解析HTTP请求中的xml文档这一事实。

function blobToDocument(blob, callback) {
  const url = URL.createObjectURL(blob);
  const request = new XMLHttpRequest();
  request.open('Get', url);
  request.responseType = 'document';
  request.addEventListener('load', () => {
    callback(request.response);
  });
  request.send();
}

After the blob has been parsed we can manipulate it like we would manipulate the DOM tree.

解析完blob之后，我们可以像操作DOM树一样操作它。

function editDocument(document) {
  const element = document.createElement('editor');
  element.textContent = 'JavaScript';
  document.firstChild.appendChild(element);
  return document;
}

In order to save the file to disk we need to reverse the process of parsing, converting the tree of elements back to a string.

为了将文件保存到磁盘，我们需要逆转解析过程，将元素树转换回字符串。

function documentToString(document) {
  const serializer = new XMLSerializer();
  return serializer.serializeToString(document);
}

The only thing left is to send the file back to disk. To achieve this we can trigger a click event on a link with our modified file.

剩下的就是将文件发送回磁盘。要实现这一点，我们可以用修改后的文件在链接上触发单击事件。

function download(string, mime) {
  const blob = new Blob([string], { type: mime });
  const a = document.createElement('a');
  const url = URL.createObjectURL(blob);
  a.href = url;
  a.download = 'document.xml';
  a.click();
}

Here is the complete code

这是完整的代码。

const input = document.querySelector('#input');

input.addEventListener('change', () => {
  const file = input.files.item(0);
  blobToDocument(file, (xmlDocument) => {
    editDocument(xmlDocument);
    download(documentToString(xmlDocument), "text/xml");
  });
});

function blobToDocument(blob, callback) {
  const url = URL.createObjectURL(blob);
  const request = new XMLHttpRequest();
  request.open('Get', url);
  request.responseType = 'document';
  request.addEventListener('load', () => {
    callback(request.response);
  });
  request.send();
}

function editDocument(document) {
  const element = document.createElement('editor');
  element.textContent = 'JavaScript';
  document.firstChild.appendChild(element);
  return document;
}

function documentToString(document) {
  const serializer = new XMLSerializer();
  return serializer.serializeToString(document);
}

function download(string, mime) {
  const blob = new Blob([string], { type: mime });
  const a = document.createElement('a');
  const url = URL.createObjectURL(blob);
  a.href = url;
  a.download = 'document.xml';
  a.click();
}

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="file" id="input" accept="text/xml">
  <script src="script.js"></script>
</body>

#1