जावास्क्रिप्ट का उपयोग करके, मैं डिस्क से एक्सएमएल फ़ाइल पढ़ना चाहता हूं, मान/तत्वों/विशेषताओं को संशोधित करना और एक्सएमएल को डिस्क पर वापस सहेजना चाहता हूं।एक्सएमएल फ़ाइल पढ़ें, मानों को संशोधित करें/तत्व/गुण जोड़ें और एक्सएमएल कैसे बचाएं?
कोई भी यहां जानता है कि मुझे ऐसे उदाहरण मिल सकते हैं जो आईई और फ़ायरफ़ॉक्स के साथ काम करते हैं? मुझे पहले से ही पढ़ने के लिए उदाहरण मिलते हैं, अब समस्या को बदलते हुए मूल्य बदल रहे हैं।
धन्यवाद
मान लिया जाये कि आप पढ़ सकते हैं और ब्राउज़र से डिस्क के लिए लिख सकते हैं और Node.js नहीं, पहला कदम फाइल सिस्टम तक पहुँच प्राप्त करने प्रकार file के input टैग का उपयोग करने के लिए है करने के लिए कोशिश कर रहे हैं।
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="file" id="input" accept="text/xml">
<script src="script.js"></script>
</body>
जैसे ही एक फ़ाइल का चयन किया जाता है हम तत्व से ब्लॉब निकालना चाहते हैं। ऐसा करने के लिए एक अच्छा पल बदलाव घटना के दौरान है।
const input = document.querySelector('#input');
input.addEventListener('change',() => {
const file = input.files.item(0);
});
तत्वों के पेड़ में ब्लॉब को पार्स करने के लिए एक से अधिक तरीके हैं। यहां मैंने इस तथ्य का लाभ उठाया कि ब्राउज़र 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();
}
ब्लॉब पार्स किए जाने के बाद हम इसे कुशल बना सकते हैं जैसे हम डोम पेड़ में हेरफेर करेंगे।
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();
}
यहाँ पूरा कोड
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>