Al usar javascript, deseo leer el archivo xml del disco, modificar los valores/agregar elementos/atributos y guardar el xml en el disco.Lea el archivo xml, modifique los valores/agregue elementos/atributos y guarde el xml ¿cómo?
Alguien sabe aquí ¿puedo encontrar ejemplos que funcionen con IE y Firefox? Ya encontré ejemplos para leer, ahora cambiar los valores es el problema.
Gracias
Suponiendo que usted está tratando de leer y escribir en el disco desde el navegador y no Node.js, el primer paso es utilizar una etiqueta de tipo inputfile para obtener acceso al sistema de archivos.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="file" id="input" accept="text/xml">
<script src="script.js"></script>
</body>
Tan pronto como se seleccione un archivo, queremos extraer el blob del elemento. Un buen momento para hacerlo es durante el evento de cambio.
const input = document.querySelector('#input');
input.addEventListener('change',() => {
const file = input.files.item(0);
});
Hay más de una forma de analizar el blob en un árbol de elementos. Aquí aproveché el hecho de que el navegador analiza documentos XML en solicitudes 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();
}
Después de analizar el blob podemos manipularlo como si manipularamos el árbol DOM.
function editDocument(document) {
const element = document.createElement('editor');
element.textContent = 'JavaScript';
document.firstChild.appendChild(element);
return document;
}
Con el fin de guardar el archivo en el disco tenemos que revertir el proceso de análisis, convertir el árbol de elementos de vuelta a una cadena.
function documentToString(document) {
const serializer = new XMLSerializer();
return serializer.serializeToString(document);
}
Lo único que queda es enviar el archivo nuevamente al disco. Para lograr esto, podemos activar un evento de clic en un enlace con nuestro archivo modificado.
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();
}
Aquí está el código completo
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>