stackoom
  简体   繁体   中英

How to save html page content in .txt file using JavaScript?

 原文  2017-03-23 05:41:44  6   3    javascript/ jquery/ html/ css

Question

I have create a static html page for quiz. Following is my code 

<style>
    body {
font-family: Open Sans;
}
#quiz {display:none;}
#prev {display:none;}
#start {display:none;}
#submit{display:none;}
ul{list-style:outside none none; margin:0px; padding:0px;}
.question>div>div>div>p{    color: #fff;
background-color: #337ab7;
padding: 6px;
border-radius: 3px;}
.navbar-default {background-color: #fff;border-color: #ddd; border-radius:0px;}
</style>
<body>
<div class='container question'>
    <div class='row'>
        <div class='col col-md-12' id='quiz'>
        </div>
    </div>
</div>

<div class='container question' >
<div class='row' id='quiz'>
</div>
</div>
<br/>
<div class='container'>
            <a href='#' class='btn btn-md btn-default pull-right' id='next'>Next</a>
            <a href='#' class='btn btn-md btn-default pull-left' id='prev'>Prev</a> 
            <a href='#' class='btn btn-md btn-default' id='start'>Start Over</a>


        <div class='button' id='submit' style='display:none;'>
            <input type='text' placeholder='Name' id="inputFileNameToSaveAs"/>
            <button type='submit' class='btn btn-success' onclick="saveTextAsFile()">Submit</button>
        </div>
</div>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

    <script type="text/javascript">


    function saveTextAsFile()
    {
    var textToSave = document.getElementById("question").text;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").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);
    }

    function loadFileAsText()
    {
        var fileToLoad = document.getElementById("fileToLoad").files[0];

        var fileReader = new FileReader();
        fileReader.onload = function(fileLoadedEvent) 
        {
            var textFromFileLoaded = fileLoadedEvent.target.result;
            document.getElementById("inputTextToSave").value = textFromFileLoaded;
        };
        fileReader.readAsText(fileToLoad, "UTF-8");
    }

                (function() {
      var questions = [
      {
        question: "Which one is correct?",
        choices: ['a!=b', 'a=!b', 'a:=b', 'a=-b'],
        correctAnswer: 0
      },

      ];

      var questionCounter = 0; //Tracks question number
      var selections = []; //Array containing user choices
      var quiz = $('#quiz'); //Quiz div object

      // Display initial question
      displayNext();

      // Click handler for the 'next' button
      $('#next').on('click', function (e) {
        e.preventDefault();

        // Suspend click listener during fade animation
        if(quiz.is(':animated')) {        
          return false;
        }
        choose();

        // If no user selection, progress is stopped
        if (isNaN(selections[questionCounter])) {
          alert('Please make a selection!');
        } else {
          questionCounter++;
          displayNext();
        }
      });

      // Click handler for the 'prev' button
      $('#prev').on('click', function (e) {
        e.preventDefault();

        if(quiz.is(':animated')) {
          return false;
        }
        choose();
        questionCounter--;
        displayNext();
      });

      // Click handler for the 'Start Over' button
      $('#start').on('click', function (e) {
        e.preventDefault();

        if(quiz.is(':animated')) {
          return false;
        }
        questionCounter = 0;
        selections = [];
        displayNext();
        $('#start').hide();
      });

      // Animates buttons on hover
      $('.button').on('mouseenter', function () {
        $(this).addClass('active');
      });
      $('.button').on('mouseleave', function () {
        $(this).removeClass('active');
      });

      // Creates and returns the div that contains the questions and 
      // the answer selections
      function createQuestionElement(index) {
        var qElement = $('<div>', {
          id: 'question'
        });

        var header = $('<p>Question ' + (index + 1)  + '</p>');
        qElement.append(header);

        var question = $('<h3>').append(questions[index].question);
        qElement.append(question);

        var radioButtons = createRadios(index);
        qElement.append(radioButtons);

        return qElement;
      }

      // Creates a list of the answer choices as radio inputs
      function createRadios(index) {
        var radioList = $('<ul>');
        var item;
        var input = '';
        for (var i = 0; i < questions[index].choices.length; i++) {
          item = $('<li>');
          input = '<input type="radio" name="answer" value=' + i + ' />';
          input += questions[index].choices[i];
          item.append(input);
          radioList.append(item);
        }
        return radioList;
      }

      // Reads the user selection and pushes the value to an array
      function choose() {
        selections[questionCounter] = +$('input[name="answer"]:checked').val();
      }

      // Displays next requested element
      function displayNext() {
        quiz.fadeOut(function() {
          $('#question').remove();

          if(questionCounter < questions.length){
            var nextQuestion = createQuestionElement(questionCounter);
            quiz.append(nextQuestion).fadeIn();
            if (!(isNaN(selections[questionCounter]))) {
              $('input[value='+selections[questionCounter]+']').prop('checked', true);
            }

            // Controls display of 'prev' button
            if(questionCounter === 1){
              $('#prev').show();
            } else if(questionCounter === 0){

              $('#prev').hide();
              $('#next').show();
            }
          }else {
            var scoreElem = displayScore();
            quiz.append(scoreElem).fadeIn();
            $('#next').hide();
            $('#prev').hide();
            $('#start').show();
            $('#submit').show();
          }
        });
      }

      // Computes score and returns a paragraph element to be displayed
      function displayScore() {
        var score = $('<h4>',{id: 'question'});

        var numCorrect = 0;
        for (var i = 0; i < selections.length; i++) {
          if (selections[i] === questions[i].correctAnswer) {
            numCorrect++;
          }
        }

        score.append('You got ' + numCorrect + ' questions out of ' +
                     questions.length + ' right!!!');
        return score;
      }
    })();


    </script>
        </body>

all is working fine but i want to save the checked radio button value and final result in .txt file i want to save all the answers by user and along with the correct and the wrong to.

3 answers

solution1
 0  2017-03-23 05:58:11

I assume you want to save the data for yourself, not the end user.

If you are looking to generate a txt file and download it - You can refer answer from Sagar V.

You can't directly save your answers or whatever data into a file by using JavaScript from a web browser.

You neeed a small server, maybe in node.js , php or java First format your answers in particular structure like json and sene it as POST request method parameter

In server parse your parameter and save to an file you need

solution2
 0 ACCPTED  2017-03-23 06:01:33

Things to note :
- initialize the variable textToSave first with no value;
- document.getElementById("question").text; Should be document.getElementById("question").innerHTML;
- in the body of choose , add the value of radio to the variable textToSave

And the result 

 var textToSave=''; function saveTextAsFile() { textToSave += ". Final Result : "+document.getElementById("question").innerHTML; var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"}); var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob); var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").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); } function loadFileAsText() { var fileToLoad = document.getElementById("fileToLoad").files[0]; var fileReader = new FileReader(); fileReader.onload = function(fileLoadedEvent) { var textFromFileLoaded = fileLoadedEvent.target.result; document.getElementById("inputTextToSave").value = textFromFileLoaded; }; fileReader.readAsText(fileToLoad, "UTF-8"); } (function() { var questions = [ { question: "Which one is correct?", choices: ['a!=b', 'a=!b', 'a:=b', 'a=-b'], correctAnswer: 0 }, ]; var questionCounter = 0; //Tracks question number var selections = []; //Array containing user choices var quiz = $('#quiz'); //Quiz div object // Display initial question displayNext(); // Click handler for the 'next' button $('#next').on('click', function (e) { e.preventDefault(); // Suspend click listener during fade animation if(quiz.is(':animated')) { return false; } choose(); // If no user selection, progress is stopped if (isNaN(selections[questionCounter])) { alert('Please make a selection!'); } else { questionCounter++; displayNext(); } }); // Click handler for the 'prev' button $('#prev').on('click', function (e) { e.preventDefault(); if(quiz.is(':animated')) { return false; } choose(); questionCounter--; displayNext(); }); // Click handler for the 'Start Over' button $('#start').on('click', function (e) { e.preventDefault(); if(quiz.is(':animated')) { return false; } questionCounter = 0; selections = []; displayNext(); $('#start').hide(); }); // Animates buttons on hover $('.button').on('mouseenter', function () { $(this).addClass('active'); }); $('.button').on('mouseleave', function () { $(this).removeClass('active'); }); // Creates and returns the div that contains the questions and // the answer selections function createQuestionElement(index) { var qElement = $('<div>', { id: 'question' }); var header = $('<p>Question ' + (index + 1) + '</p>'); qElement.append(header); var question = $('<h3>').append(questions[index].question); qElement.append(question); var radioButtons = createRadios(index); qElement.append(radioButtons); return qElement; } // Creates a list of the answer choices as radio inputs function createRadios(index) { var radioList = $('<ul>'); var item; var input = ''; for (var i = 0; i < questions[index].choices.length; i++) { item = $('<li>'); input = '<input type="radio" name="answer" value=' + i + ' />'; input += questions[index].choices[i]; item.append(input); radioList.append(item); } return radioList; } // Reads the user selection and pushes the value to an array function choose() { selections[questionCounter] = +$('input[name="answer"]:checked').val(); textToSave += "Choosen Value : "+selections[questionCounter]; } // Displays next requested element function displayNext() { quiz.fadeOut(function() { $('#question').remove(); if(questionCounter < questions.length){ var nextQuestion = createQuestionElement(questionCounter); quiz.append(nextQuestion).fadeIn(); if (!(isNaN(selections[questionCounter]))) { $('input[value='+selections[questionCounter]+']').prop('checked', true); } // Controls display of 'prev' button if(questionCounter === 1){ $('#prev').show(); } else if(questionCounter === 0){ $('#prev').hide(); $('#next').show(); } }else { var scoreElem = displayScore(); quiz.append(scoreElem).fadeIn(); $('#next').hide(); $('#prev').hide(); $('#start').show(); $('#submit').show(); } }); } // Computes score and returns a paragraph element to be displayed function displayScore() { var score = $('<h4>',{id: 'question'}); var numCorrect = 0; for (var i = 0; i < selections.length; i++) { if (selections[i] === questions[i].correctAnswer) { numCorrect++; } } score.append('You got ' + numCorrect + ' questions out of ' + questions.length + ' right!!!'); return score; } })(); 
 <style> body { font-family: Open Sans; } #quiz {display:none;} #prev {display:none;} #start {display:none;} #submit{display:none;} ul{list-style:outside none none; margin:0px; padding:0px;} .question>div>div>div>p{ color: #fff; background-color: #337ab7; padding: 6px; border-radius: 3px;} .navbar-default {background-color: #fff;border-color: #ddd; border-radius:0px;} </style> <body> <div class='container question'> <div class='row'> <div class='col col-md-12' id='quiz'> </div> </div> </div> <div class='container question' > <div class='row' id='quiz'> </div> </div> <br/> <div class='container'> <a href='#' class='btn btn-md btn-default pull-right' id='next'>Next</a> <a href='#' class='btn btn-md btn-default pull-left' id='prev'>Prev</a> <a href='#' class='btn btn-md btn-default' id='start'>Start Over</a> <div class='button' id='submit' style='display:none;'> <input type='text' placeholder='Name' id="inputFileNameToSaveAs"/> <button type='submit' class='btn btn-success' onclick="saveTextAsFile()">Submit</button> </div> </div> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> </body>

solution3
 0  2017-03-23 06:14:15

function downloadFile(filename, content) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
    element.setAttribute('download', filename);

    element.style.display = 'none';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to save file txt using html and php How to save JavaScript generated content as HTML in the file? How to save the value of a textbox to a .txt file using php in html without reloading or redirecting the page? how to upload a .txt file and save to another directory using a html,php,css and javascript? How to read txt file and save it in array in javascript in html How to load content from a .txt file with html in it … into a div using php or javascript How to print a .txt file content in a html site with javascript every 1 s? Javascript save variable to .txt file on server and overwrite the.txt content HTML - How to translate page content using Javascript? How to append and save form data to txt file using javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM