Korzystając z javascript, chcę odczytać plik xml z dysku, zmodyfikować wartości/dodać elementy/atrybuty i zapisać xml z powrotem na dysk.Czytasz plik xml, modyfikujesz wartości/dodajesz elementy/atrybuty i zapisujesz xml w jaki sposób?
Ktoś wie, czy mogę znaleźć przykłady, które działają z IE i Firefox? Już znalazłem przykłady do przeczytania, teraz zmiana wartości jest problemem.
Dzięki
Zakładając, że starają się odczytywać i zapisywać na dysku z poziomu przeglądarki i nie node.js, pierwszym krokiem jest użycie input tag typu file aby uzyskać dostęp do systemu plików.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="file" id="input" accept="text/xml">
<script src="script.js"></script>
</body>
Po wybraniu pliku chcemy wyodrębnić obiekt typu blob z elementu. Dobra okazja, aby to zrobić, to podczas wydarzenia związanego ze zmianą.
const input = document.querySelector('#input');
input.addEventListener('change',() => {
const file = input.files.item(0);
});
Istnieje więcej niż jeden sposób, aby przeanalizować obiekt typu blob w drzewie elementów. Tutaj skorzystałem z faktu, że przeglądarka analizuje dokumenty XML w żądaniach HTTP.
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();
}
Po przeanalizowaniu tego obiektu, możemy nim manipulować tak, jak manipulujemy drzewem DOM.
function editDocument(document) {
const element = document.createElement('editor');
element.textContent = 'JavaScript';
document.firstChild.appendChild(element);
return document;
}
Aby zapisać plik na dysku musimy odwrócić proces analizowania, konwersji drzewo elementów z powrotem do łańcucha.
function documentToString(document) {
const serializer = new XMLSerializer();
return serializer.serializeToString(document);
}
Pozostaje tylko wysłać plik z powrotem na dysk. Aby to osiągnąć, możemy wywołać zdarzenie kliknięcia na łączu z naszym zmodyfikowanym plikiem.
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();
}
Oto kompletny kod
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>