Geek Answers Handbook

Read the xml file, change the values ​​/ add elements / attributes and save the xml as?

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

Does anyone know if I can find examples that work with IE and Firefox? I already found examples to read, now changing the values ​​that are the problem.

thanks

+7
javascript xml
source share
1 answer

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

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

Once the file is selected, we want to extract the blob from this element. A good point for this is during a change event.

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

There are several ways to parse blob into the element tree. Here I took advantage of the fact that the browser parses XML documents in HTTP requests.

 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, as if we would manipulate the DOM tree.

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

To save the file to disk, we need to reverse the parsing process, converting the element tree back to a string.

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

It remains only to send the file back to disk. To do this, we can trigger a click event on the 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
source share

More articles:


All Articles