如何使用 Javascript 将 HTML 表单数据输出到 XML 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11383236/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to output HTML form data to a XML file using Javascript?
提问by Chris
I'm currently trying to figure out how to output my HTML form data to an XML file. This is an idea I've been playing around with for the past couple of days in order to create a autounattended.xml file to be used with Windows 7 installations.
我目前正试图弄清楚如何将我的 HTML 表单数据输出到一个 XML 文件。这是我过去几天一直在玩的一个想法，目的是创建一个用于 Windows 7 安装的 autounattended.xml 文件。
Currently my HTML is as follows:
目前我的 HTML 如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Windows 7 Answer File Generator</title>
</head>
<body>
<form>
<h1>Windows 7 Answer File Generator</h1>
<h2>General Settings</h2>
<table>
<tr>
<td width="200px">Skip product key:</td>
<td>
<select name="SkipProductKey">
<option value="Yes" selected="selected">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr>
<td width="200px">Skip automatic activation:</td>
<td>
<select name="SkipAutoActivation">
<option value="Yes" selected="selected">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
</table>
</body>
</html>
This is just a snippet of what I've been working on. So, I was wondering if its possible to use javascript to create an XML file based on the select values and ask the user where to save the xml file. Any information regarding this would be a big help.
这只是我一直在努力的一小部分。所以，我想知道是否可以使用 javascript 根据选择值创建一个 XML 文件，并询问用户将 xml 文件保存在哪里。任何有关这方面的信息都会有很大帮助。
回答by Markus Jarderot
$(function () {
$('#DownloadButton').click(update);
});
var template = [
'<?xml version="1.0"?>',
'<unattend xmlns="urn:schemas-microsoft-com:unattend">',
'...',
'<SkipProductKey><?SkipProductKey?></SkipProductKey>',
'...',
'<SkipAutoActivation><?SkipAutoActivation?></SkipAutoActivation>',
'...',
'</unattend>'
].join('\r\n');
function update() {
var variables = {
'SkipProductKey': $('#SkipProductKey').val(),
'SkipAutoActivation': $('#SkipAutoActivation').val()
};
var newXml = template.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
$('#ResultXml').val(newXml);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(newXml))
.attr('download', 'autounattended.xml');
$('#generated').show();
}
if (!window.btoa) {
// Source: http://www.koders.com/javascript/fid78168FE1380F7420FB7B7CD8BAEAE58929523C17.aspx
btoa = function (input) {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
var result = '';
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
do {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
result += chars.charAt(enc1) + chars.charAt(enc2) + chars.charAt(enc3) + chars.charAt(enc4);
} while (i < input.length);
return result;
};
}
Edit:
编辑：
- Added the download-button as requested from OP.
- Added the
download-attribute to the link to show the Save As-dialog when clicked. (Thanks Saurabh) - Demo updated.
- 根据 OP 的要求添加了下载按钮。
- 将 -属性添加
download到链接以在单击时显示另存为 -对话框。（感谢索拉布） - 演示更新。
