Question

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

任何人都知道我可以找到适用于IE和Firefox的示例吗？我已经找到了要阅读的例子，现在正在改变值，这就是问题所在。

由于

Answer 1

假设您尝试从浏览器读取和写入磁盘而不是node.js，第一步是使用input类型的file标记来访问文件系统。

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

一旦选择了文件，我们就想从元素中提取blob。这是一个很好的时刻，在变革事件中。

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

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

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

在解析blob后，我们可以操纵它，就像我们操纵DOM树一样。

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

这是完整的代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: