JavaScript:Example:XmlReader
JavaScript에서 XML파일을 읽는 예제. vkBeautify.js를 필요로 한다.
<!DOCTYPE html>
<html>
<head>
<title>XML CHANGER</title>
<script src="vkbeautify.js"></script>
<script type='text/javascript'>
/* This is comment! */
// This is comment!
var enable_pprint = false;
var g_reader; // File reader object.
var g_dom; // DOM object.
/** Check for the various File API support. */
function checkFileAPI() {
if (window.File && window.FileReader && window.FileList && window.Blob) {
g_reader = new FileReader();
return true;
} else {
return false;
}
var reader;
}
function add(a, b) {
return a + b;
}
function onBodyLoad() {
if (checkFileAPI() == false) {
alert('The File APIs are not fully supported by your browser. Fallback required.');
}
}
function onFileSelect(file) {
var path = file.value;
document.getElementById('select_path').innerText = path;
readText(file);
}
function getXmlParser(xml) {
return new DOMParser().parseFromString(xml, 'text/xml');
}
function updateDownloadLink(xml_string) {
document.getElementById('download_xml').href = URL.createObjectURL(new Blob([xml_string]));
}
function updateDownloadLinkWithGlobalDom() {
var serializer = new XMLSerializer();
var xml_string = serializer.serializeToString(g_dom);
if (enable_pprint) {
var pretty_xml = vkbeautify.xml(xml_string, false); // Pretty printing off.
updateDownloadLink(pretty_xml);
} else {
updateDownloadLink(xml_string);
}
}
function updateTitle(index, title) {
var xfdf = g_dom.getElementsByTagName('xfdf')[0];
var annots = xfdf.getElementsByTagName('annots')[0];
var freetexts = annots.getElementsByTagName('freetext');
var freetext = freetexts[index];
var contents = freetext.getElementsByTagName('contents-richtext')[0];
var paragraph = contents.getElementsByTagName('p')[0];
freetext.setAttribute('title', title);
}
function updateContent(index, content) {
var xfdf = g_dom.getElementsByTagName('xfdf')[0];
var annots = xfdf.getElementsByTagName('annots')[0];
var freetexts = annots.getElementsByTagName('freetext');
var freetext = freetexts[index];
var contents = freetext.getElementsByTagName('contents-richtext')[0];
var paragraph = contents.getElementsByTagName('p')[0];
paragraph.innerHTML = content;
}
function updateColor(index, color) {
var xfdf = g_dom.getElementsByTagName('xfdf')[0];
var annots = xfdf.getElementsByTagName('annots')[0];
var freetexts = annots.getElementsByTagName('freetext');
var freetext = freetexts[index];
var contents = freetext.getElementsByTagName('contents-richtext')[0];
var paragraph = contents.getElementsByTagName('p')[0];
freetext.setAttribute('color', color);
}
function onReadXmlText(xml) {
var pretty_xml = vkbeautify.xml(xml, false);
var min_xml = vkbeautify.xmlmin(xml, false);
document.getElementById('select_xml').innerText = min_xml;
g_dom = getXmlParser(min_xml);
// DOM to 'xml_result'
var xfdf = g_dom.getElementsByTagName('xfdf')[0];
var annots = xfdf.getElementsByTagName('annots')[0];
var freetexts = annots.getElementsByTagName('freetext');
var copy_content = '';
var TAB_CHAR = '\t'
var LF_CHAR = '\n'
for (var i = 0; i < freetexts.length; i++) {
var freetext = freetexts[i];
var contents = freetext.getElementsByTagName('contents-richtext')[0];
var paragraph = contents.getElementsByTagName('p')[0];
var LF_CODE = '
';
var title = freetext.getAttribute('title').trim();
var content = paragraph.innerHTML;
var content2 = content.replace(/[\r\n]/g, LF_CODE);
var color_att = freetext.getAttribute('color');
var color = color_att !== null ? color_att.trim() : '#FFFFFF';
// TODO: Append more attributes.
var full_content = '';
full_content += '<tr>';
full_content += '<td>' + i + '</td>';
full_content += '<td>' + title + '</td>';
full_content += '<td>' + content2 + '</td>';
full_content += '<td>' + color + '</td>';
copy_content += i + TAB_CHAR + title + TAB_CHAR + content2 + TAB_CHAR + color + LF_CHAR;
// TODO: Append more attributes.
full_content += '</tr>';
document.getElementById('xml_result').innerHTML += full_content;
}
document.getElementById('user_defined_area').value = copy_content;
}
var UNABLE_ACCESS_MSG =
'Unable to access local files due to browser security settings. ' +
'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' +
'Find the setting for "Initialize and script ActiveX controls not marked as safe' +
'" and change it to "Enable" or "Prompt"';
/* Read text input. */
function readText(file_input) {
var output = ''; // placeholder for text output.
if (file_input.files && file_input.files[0]) {
// End if html5 filelist support.
g_reader.onload = function (e) {
output = e.target.result;
onReadXmlText(output);
};
g_reader.readAsText(file_input.files[0]);
} else if (ActiveXObject && file_input) {
// fallback to IE 6-8 support via ActiveX.
try {
g_reader = new ActiveXObject("Scripting.FileSystemObject");
var file = g_reader.OpenTextFile(file_input, 1); // ActiveX File Object
output = file.ReadAll(); // text contents of file
file.Close(); // close file "input stream"
onReadXmlText(output);
} catch (e) {
if (e.number == -2146827859) {
alert(UNABLE_ACCESS_MSG);
}
}
} else {
// this is where you could fallback to Java Applet, Flash or similar
return false;
}
return true;
}
var INDEX_INDEX = 0;
var TITLE_INDEX = 1;
var CONTENT_INDEX = 2;
var COLOR_INDEX = 3;
function updateNewData() {
var input = document.getElementById('user_defined_area').value;
var rows = input.split('\n');
for (var row_index = 0; row_index < rows.length; row_index++) {
var cols = rows[row_index].split('\t');
for (var col_index = 0; col_index < cols.length; col_index++) {
// console.debug('COLS: [' + row_index + ',' + col_index + ']' + cols[col_index]);
// @formatter:off
switch (col_index) {
case TITLE_INDEX: updateTitle (cols[INDEX_INDEX], cols[col_index]); break;
case CONTENT_INDEX: updateContent(cols[INDEX_INDEX], cols[col_index]); break;
case COLOR_INDEX: updateColor (cols[INDEX_INDEX], cols[col_index]); break;
// TODO: Append more attributes.
}
// @formatter:on
}
}
updateDownloadLinkWithGlobalDom();
}
</script>
<style type='text/css'>
/* This is comment! */
table, th, td {
border: 1px solid black;
}
textarea {
width: calc(100% - 5px);
height: 100px;
}
.section {
border-style: solid;
border-width: 1px;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body onLoad='onBodyLoad();'>
<div class='section'>
<input type='file' onChange='onFileSelect(this);' />
</div>
<div class='section'>
<p>Select file: <span id='select_path'></span></p>
</div>
<div class='section' style='display:none;'>
<p id='select_xml'></p>
</div>
<div class='section'>
<table>
<thead>
<tr>
<td>INDEX</td>
<td>TITLE</td>
<td>CONTENT</td>
<td>COLOR</td>
<!-- TODO: Append more attributes. -->
</tr>
</thead>
<tbody id='xml_result'>
</tbody>
</table>
</div>
<div class='section'>
<span>Edit area: </span>
<textarea id='user_defined_area'></textarea>
</div>
<div class='section'>
<input type='button' onClick='updateNewData();' value='Update' />
</div>
<div class='section'>
<a id='download_xml' download='xml_result.xml' type='application/xml'>Download</a>
</div>
</body>
</html>