javascript - 将 HTML/JavaScript 形式的答案保存到用户指定的 .txt 文件时遇到问题

问题描述

我在将 HTML/JavaScript 表单中的答案保存到 .txt 文件时遇到问题。如您所见，它会询问所有详细信息和保存数据的文件名，但即使在按下提交按钮后它也不会做任何事情。因此，我不是 100% 确定发生了什么，而且我可能在代码中的某个地方搞砸了。现在，我希望能够只使用前端语言而不是服务器端知识来做到这一点。忽略表单操作中的 main.php。我不是 100% 确定这是否可以在没有 PHP 的情况下完成。

构建.html：

<!DOCTYPE html>
<html>
<head>
<title>Resumaker</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src = "main.js"></script>
</head>
<body>

<header> 
        <nav>
            <h1> RESUMAKER </h1>
            <ul>
                <li style="float:right"><a class = "active" 
                href="build.html" target="_blank"><span> Build a Resume 
                </span></a></li>
                <li><a href="createaccount.html" target="_blank"><span> 
                Create Account </span></a></li>
                <li><a href="signin.html" target="_blank"><span> Sign in 
                 </span></a></li>
                <li><a href="resources.html" target="_blank"><span> 
                Resources </span></a></li>
                <li><a href="contacts.html" target="_blank"><span> Talk to 
                us </span></a></li>
            </ul>
        </nav>
    </header>

<h1 class = "third"><strong> Build your resume here! </strong></h1>

<h2 class = "fourth"> YOUR PERSONAL INFO </h2>

<form autocomplete="on" method="post" class = "fourth">
    <label for = "first_name"> <b>First name:</b> </label>
    <input type="text" name="first_name" id = "first_name" 
    placeholder="John" autofocus /><br>
    <label for = "last_name"> <b>Last name:</b> </label>
    <input type="text" name="last_name" id = "last_name" placeholder="Doe" 
    /><br>
    <label for = "user_email"> <b>Email:</b> </label>
    <input type="email" name="user_email" id = "user_email" 
    placeholder="johndoe@gotham.com" autocomplete="off" /><br>
    <label for = "phone_number"> <b>Phone Number:</b> </label>
    <input name="phone_number" type="number" id = "phone_number" 
     placeholder="(987)-654-3210" /><br>
    <label for = "location"> <b>Location:</b> </label>
    <input type="text" name="location" id = "location" placeholder="Gotham 
    City" autofocus /><br>
    <label for = "linkedin"> <b>LinkedIn:</b> </label>
    <input type="url" name="linkedin" id = "linkedin" autofocus /><br>
    <label for="filename"> <b>Filename</b></label>
    <input type = "text" id="filename" value="" size="40" 
    placeholder="title.md">
    <br/><br/>
    <input onclick="saveFormAsTextFile()" type="button" value = "Make your 
     resume" />
    <input type="reset"><br><br>
</form>

</body>
</html>

主.js：

function saveFormAsTextFile()

    {
    alert('Hey');
    var textToSave =
      '---\n'+
      'First Name: ' + document.getElementById('first_name').value + '\n'+ 
      'Last Name: ' + document.getElementById('last_name').value + '\n' + 
      'Email: ' + document.getElementById('user_email').value + '\n' +
      'Phone Number: ' + document.getElementById('phone_number').value + 
      '\n' + 
      'Location: ' + '\n- ' + document.getElementById('location').value + 
      '\n' + 
      'LinkedIn: ' + '\n- ' + document.getElementById('linkedin').value + 
      '\n' + 

    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("filename").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();

    }

function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}

主文件：Test.html

<head>
    <title>Resumaker</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

    <header> 
        <nav>
            <h1 class = "second"> RESUMAKER </h1>
            <ul>
                <li><a href="build.html" target="_blank"><span> Build Your Resume </span></a></li>
                <li><a href="createaccount.html" target="_blank"><span> Create Account </span></a></li>
                <li><a href="signin.html" target="_blank"><span> Sign in </span></a></li>
                <li><a href="resources.html" target="_blank"><span> Resources </span></a></li>
                <li><a href="contacts.html" target="_blank"><span> Talk To Us </span></a></li>
            </ul>
        </nav>
    </header>

    <script type="text/javascript" src="main.js"></script>

</body>

标签： javascripthtml

javascript - 将 HTML/JavaScript 形式的答案保存到用户指定的 .txt 文件时遇到问题

问题描述

解决方案

推荐阅读