Question

这是我已经拥有的代码。

Username: <input type "text" id="inp" />
<p id="res"></p>

Password: <input type "text" id="inp" />
<p id="res"></p>

<a download="info.txt" id="downloadlink" style="display: none">Download</a>

<button type="button">Download</button>

我希望将两个输入的用户名和密码下载到文件中并停止弹出窗口

Answer 1

首先，您不应该在HTML代码中使用重复的id's，然后尝试将input事件附加到输入的事件中，因此每次在其中一个中键入{{1 }}会自动生成，并使用键入的数据构建到文件的链接：

jQuery解决方案：

href

Answer 2

请找到JS代码：

function downloadFile() {
    var obj = {a: <INPUT_1>, b: <INPUT_2>};
    var filename = "download.json";
    var blob = new Blob([JSON.stringify(obj)], {type: 'text/plain'});
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, filename);
    } else{
        var e = document.createEvent('MouseEvents'),
        a = document.createElement('a');
        a.download = filename;
        a.href = window.URL.createObjectURL(blob);
        a.dataset.downloadurl = ['text/plain', a.download, a.href].join(':');
        e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        a.dispatchEvent(e);
    }
}

HTML代码：

<input type="button" onclick="downloadFile();" value="Download">

在下面找到完整的代码：



    <html>

    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script>
        function downloadFile() {
    var obj = {a: "<INPUT_1>", b: "<INPUT_2>"};
    var filename = "download.json";
    var blob = new Blob([JSON.stringify(obj)], {type: 'text/plain'});
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, filename);
    } else{
        var e = document.createEvent('MouseEvents'),
        a = document.createElement('a');
        a.download = filename;
        a.href = window.URL.createObjectURL(blob);
        a.dataset.downloadurl = ['text/plain', a.download, a.href].join(':');
        e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        a.dispatchEvent(e);
    }
}
      </script>
    </head>

    <body>
      Username: <input type "text" id="inp1" />
      <p id="res1"></p>

      Password: <input type "text" id="inp2" />
      <p id="res2"></p>

      <input type="button" onclick="downloadFile();" value="Download">
    </body>

    </html>

Answer 3

这是最终结果，谢谢您的帮助

<head>

    <title> test </title>




    <script type='text/javascript'>
    window.onload=function(){
    (function () {
    var textFile = null,
    makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});
    if (textFile !== null) {
    window.URL.revokeObjectURL(textFile);
    }
    textFile = window.URL.createObjectURL(data);
    return textFile;
    };

    var create = document.getElementById('create'),
    email = document.getElementById('email');
    var create = document.getElementById('create'),
    password = document.getElementById('password');

    create.addEventListener('click', function () {
    var link = document.getElementById('downloadlink');

    link.href = makeTextFile(email.value + password.value);

    link.style.display = 'block';
    }, false);
    })();
    }
    </script>




</head>

<body>

    Username:<input id="email"></input>
    <p id="res"></p>
    Password:<input id="password"></input> 
    <p id="res"></p>


    <button id="create">Login</button><a download="info.txt" id="downloadlink" style="display: none">Download</a>



    <script>
    if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
    height: document.body.getBounthingClientRect().height,
    slug: "qm5AG"
    }], "*")
    }
    </script>


</body>

如何在javascript中将用户输入下载为文件？

3 个答案: