1

exporting data to txt textarea with javascript or jquery?

the generate button , fills the textarea and the export button should export all data to a txt, but is being exported blank

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">


    <title>gerador de CPF</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/starter-template.css" rel="stylesheet">


     <script type="text/javascript">
            //Função para exportar
            window.onload = function() {

              var a = document.getElementById("exportxt");
              a.onclick = function() {

    function downloadInnerHtml(filename, elId, mimeType) {
        var elHtml = document.getElementById(elId).innerHTML;
        var link = document.createElement('a');
        mimeType = mimeType || 'text/plain';
        link.setAttribute('download', filename);
        link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
        link.click(); 
    }
    var fileName =  'myexportedhtml.txt'; 
    downloadInnerHtml(fileName, 'toClipboard','text/plain');

                return false;
              }
            }



            //Função para gerar CPF

            gerarCpf = function(){
                var cpf =  document.getElementById("toClipboard").value;
                var qtd = document.getElementById("quantidade").value;
                var arrayCpf = [];
                var arrayCpf2 = [];
                var arrayCpfFinal = [];
                var soma = 0;
                var regiao;

                if(qtd == "" || qtd == 0 || qtd > 1000){
                    alert('Digite uma quantidade valida até 1000!!');
                }else{
                    for( var i=0; i < qtd; i++){
                        cpf =  document.getElementById("toClipboard").value;
                        arrayCpfFinal[i] = "";
                        soma = 0;

                        //Criação do digito 1
                        for(var j=0; j < 9; j++){
                            if (j === 8){
                                regiao = document.getElementById("regiao");
                                arrayCpf[j] = regiao.options[regiao.selectedIndex].value;
                            }else{
                                arrayCpf[j] = Math.floor(Math.random()*10);
                            }
                                arrayCpfFinal[i] += arrayCpf[j] + "";
                                arrayCpf2[j] = arrayCpf[j] * (10 - j);
                                soma += arrayCpf2[j];

                        }

                        if(soma % 11 < 2){
                            arrayCpf[9] = 0;
                        }else{
                            arrayCpf[9] = 11 - (soma % 11);
                        }
                        arrayCpfFinal[i] += "" + arrayCpf[9];


                        //criação do digito 2
                        soma = 0;
                        for(var j=0; j < 10; j++){
                            arrayCpf2[j] = arrayCpf[j] * (11 - j);
                            soma += arrayCpf2[j];           
                        }

                        if(soma % 11 < 2){
                            arrayCpf[10] = 0;
                        }else{
                            arrayCpf[10] = 11 - (soma % 11);
                        }

                        arrayCpfFinal[i] += "" + arrayCpf[10];



                        // imprime os cpf
                        if(i == 0){
                            document.getElementById("toClipboard").value = arrayCpfFinal[i];
                        }else{
                            document.getElementById("toClipboard").value = cpf + "\n" + arrayCpfFinal[i];
                        }
                    }
                }



            };

//function copiar
function CopyToClipboard () {
            var input = document.getElementById ("toClipboard");
            var textToClipboard = input.value;

            var success = true;
            if (window.clipboardData) { // Internet Explorer
                window.clipboardData.setData ("Text", textToClipboard);
            }
            else {
                    // create a temporary element for the execCommand method
                var forExecElement = CreateElementForExecCommand (textToClipboard);

                        /* Select the contents of the element 
                            (the execCommand for 'copy' method works on the selection) */
                SelectContent (forExecElement);

                var supported = true;

                    // UniversalXPConnect privilege is required for clipboard access in Firefox
                try {
                    if (window.netscape && netscape.security) {
                        netscape.security.PrivilegeManager.enablePrivilege ("UniversalXPConnect");
                    }

                        // Copy the selected content to the clipboard
                        // Works in Firefox and in Safari before version 5
                    success = document.execCommand ("copy", false, null);
                }
                catch (e) {
                    success = false;
                }

                    // remove the temporary element
                document.body.removeChild (forExecElement);
            }


        }

        function CreateElementForExecCommand (textToClipboard) {
            var forExecElement = document.createElement ("div");
                // place outside the visible area
            forExecElement.style.position = "absolute";
            forExecElement.style.left = "-10000px";
            forExecElement.style.top = "-10000px";
                // write the necessary text into the element and append to the document
            forExecElement.textContent = textToClipboard;
            document.body.appendChild (forExecElement);
                // the contentEditable mode is necessary for the  execCommand method in Firefox
            forExecElement.contentEditable = true;

            return forExecElement;
        }

        function SelectContent (element) {
                // first create a range
            var rangeToSelect = document.createRange ();
            rangeToSelect.selectNodeContents (element);

                // select the contents
            var selection = window.getSelection ();
            selection.removeAllRanges ();
            selection.addRange (rangeToSelect);
            document.getElementById("toClipboard").select();
        }



//Function bloqueia letras no input de quantidade       
function SomenteNumero(e){
            var tecla=(window.event)?event.keyCode:e.which;   
            if((tecla>47 && tecla<58)) return true;
            else{
                if (tecla==8 || tecla==0) return true;
            else  return false;
            }
        }       

        function GetValue () {
            var area = document.getElementById ("toClipboard");
            alert (area.value);
        }
    </script>




  </head>

  <body>


    <!-- Inicio do Menu -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Gerador de CPF</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>

          </ul>
        </div>
      </div>
    </nav> 
    <!-- Fim do Menu -->




<br/><br/>
    <div class="container">

      <div class="starter-template">
        <h1>Gerador de CPF</h1>
        <p class="lead"></p>


        <form>


        <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">Quantidade</span>
          <input id="quantidade" name="quantidade" type="text" class="form-control" placeholder="Quantos CPFs? " aria-describedby="basic-addon1" value='' onkeypress="return SomenteNumero(event)" onpaste="return false">
        </div>


<br><br>
            Regiao: <select id="regiao" name="regiao">
                            <option value="0"> Rio Grande do Sul
                            <option value="1"> Brasília
                            <option value="1"> Goáis
                            <option value="1"> Mato Grosso do Sul
                            <option value="1"> Tocantins
                            <option value="2"> Acre
                            <option value="2"> Amapá
                            <option value="2"> Amazonas
                            <option value="2"> Pará
                            <option value="2"> Rondonia
                            <option value="2"> Roraima
                            <option value="3"> Ceará
                            <option value="3"> Maranhão
                            <option value="3"> Piauí
                            <option value="4"> Alagoas
                            <option value="4"> Paraíba
                            <option value="4"> Pernambuco
                            <option value="4"> Rio Grande do Norte
                            <option value="5"> Bahia
                            <option value="5"> Sergipe
                            <option value="6"> Minas Gerais
                            <option value="7"> Espirito Santo
                            <option value="7"> Rio de Janeiro
                            <option value="8"> São Paulo
                            <option value="9"> Paraná
                            <option value="9"> Santa Catarina
                        </select>
                <br><br>        



                <br/>
                <button type="button" class="btn btn-success" value="Gerar" onclick="gerarCpf()">Gerar</button>
                <button type="button" class="btn btn-success" value="Copiar" onclick="CopyToClipboard()">Copiar</button>
                    <button type="button" class="btn btn-success" value="Pegar valor" onclick="GetValue()">Pegar valor</button>
                <a id="exportxt" class="btn btn-success" href="#" role="button">Export</a>

                <br/>



                <br/> <br/>

                <div class="form-group"  >
                  <label for="comment">Lista de CPFS:</label> <br/>
                  <textarea class="field span12" id="toClipboard" name="toClipboard" class="form-control" rows="5"></textarea>
                </div>

                <br><br>            
            </form>     




      </div>

    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>


  </body>
</html>

already tried in every way , but I want to use only javascript and jquery , I do not usra another language .

Paulo Roberto
  • 1,498
  • 5
  • 19
  • 42
  • [You can use data URIs.](http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server) – cdMinix Jul 20 '15 at 14:18

0 Answers0