如何使用Javascript将HTML表单数据输出到XML文件？

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文件。这是我过去几天一直在玩的一个想法,以便创建一个autounattended.xml文件,用于Windows 7安装。

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文件。有关这方面的任何信息将是一个很大的帮助。

1 个解决方案

#1

Demo here

$(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.

根据OP的要求添加了下载按钮。

Added the download-attribute to the link to show the Save As-dialog when clicked. (Thanks Saurabh)

将download-attribute添加到链接以在单击时显示“另存为”对话框。 (谢谢Saurabh)

Demo updated.

#1