Question

我正在尝试从html表单下载数据并将所述数据保存为XML文件。我找到了一个关于如何使用JS在线执行此操作的教程，但我遇到了一些成功实现它的问题。

当我点击“创建文件”时，我会在textarea中看到所需的输出显示，但随着页面刷新后立即消失，我无法让下载按钮工作。如果有人可以建议我如何让XML保留在textarea中，以及如何让下载按钮工作，那将非常棒。谢谢。

教程以及试图实现的实例 http://jsbin.com/xusekaqoma/edit?html,js,output

的JavaScript

<script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">

</script>

<script>

        $(function () {
      $('#DownloadButton').click(update);
    });

    var template = [
      '<?xml version="1.0"?>',
      '<unattend xmlns="urn:schemas-microsoft-com:unattend">',
      '...',
      '<Satisfaction><?Satisfaction?></Satisfaction>',
      '...',
      '<FutureProducts><?FutureProducts?></FutureProducts>',
      '...',
       '<HearAboutCompany><?HearAboutCompany?></HearAboutCompany>',
       '...',
       '<Contact><?Contact?></Contact>',
       '...',
       '<Promotions><?Promotions?></Promotions>',
       '...',
      '</unattend>'
    ].join('\r\n');

    function update() {
      var variables = {
        'Satisfaction': $('#Satisfaction').val(),
        'FutureProducts': $('#FutureProducts').val(),
        'HearAboutCompany': $('#HearAboutCompany').val(),
        'Contact': $('#Contact').val(),
        'Promotions': $('#Promotions').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;
      };
    }

</script>

HTML

<div id ="main">


        <form action ="" name = "myForm" class = "contact" >

        <h3>Please take a moment to fill out this short survey </h3></br>

        <label>
        <span>Satisfaction with service</span></br>

        <select id="Satisfaction">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3" >3</option>
                <option value="4">4</option>
                <option value="5">5</option>
        </select></br>

        </label>
        <label>
        <span>Future products your intrested in?</span></br>

        <select id="FutureProducts">
                <option value="Smartwatch">Smart Watch</option>
                <option value="VirtualRealitydevices">Virtual Reality devices</option>

        </select></br>

        </label>            
        <label>
        <span>How did you hear about the company?</span></br>

        <select id="HearAboutCompany">
                <option value="friend">friend</option>
                <option value="online">online</option>
                <option value="local">local advertisement</option>

        </select></br>
        </label>


        <label>
        <span>Preferred means of contact</span></br>

        <select id="Contact">
                <option value="mobile">mobile</option>
                <option value="post">post</option>
                <option value="email">email</option>

        </select></br>

        </label>


        <label>
        <span>Do you wish to be contacted about future promotions ?</span></br>


          <select id="Promotions">
                <option value="yes">yes</option>
                <option value="no">no</option>


        </select></br>


         <button id="DownloadButton">Create file</button>

        </label>

        </form>

          <div id="generated" style="">
        <h2>autounattended.xml</h2>
            <a href="#" id="DownloadLink">Download</a>
            <textarea id="ResultXml" style="width: 100%; height: 30em" readonly="readonly"></textarea>
        </div>

        </div>

Answer 1

(?im)^(?:[^a-z].*\r?\n)*([a-z]+).*(\r?\n[^a-z].*)* ^^^^^^^^^^^^^^^^^元素的默认行为类似于<button>，它会自动提交表单。试试<input type="submit"/>

将HTML表单数据下载为xml文件的问题

1 个答案: