How do I download the contents of a div?

Asked

Viewed 276 times

-2

Hello! I have on my index:

<div class="panel-body">
  <div id="teste"></div>
</div>

and have in a JS file the following:

function downloadDiv(filename, elementId, mimeType) {

    if ($('#teste').html() == "") {

        swal("Erro!", "Teste está vazio.", "error");

    } else {

        var elementHtml = '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><style>.checker-hr {padding: 0px;margin: 0px;}</style>\n\n' + document.getElementById('#teste');
        var link = document.createElement('a');
        //mimeType = mimeType || 'text/plain';
        // nome do arquivo que vai ser baixado
        var fileName =  'teste.html';
    
        link.setAttribute('download', fileName);
        link.setAttribute('href', 'charset=utf-8,' + encodeURIComponent(elementHtml));
        link.click(); 

        swal("Sucesso!", "Foi feito o download de teste com sucesso!", "success");

    }

}

My idea is to download everything inside the div "test", but this does not work. Does anyone know what I might have done wrong and how to fix it?

php javascript jquery
  • 1

    I don’t understand what you want to do. Your <div> is empty and the code seems to be an attempt to force the user to make an unintended download.

  • It was just an example. They will have items in the div, but they will always be different items, so I need to put to download, but always give this when I download: https://prnt.sc/r2ibfw

  • 1

    Put a [MCVE], because no one will be kicking whether or not you hit what you do. It doesn’t matter if you’re trying to make a DDA(driven download Attack) only the code has to reflect what you’re asking.

  • 1

    By a JS code with Jquery I send information into that Div

1 answer

0


There is a syntax error on this line:

var elementHtml = ... + document.getElementById('#teste');
                                                 ↑

Should not include hash, only id name:

var elementHtml = ... + document.getElementById('teste');

And to take the internal content of the element, use .innerHTML:

var elementHtml = ... + document.getElementById('teste').innerHTML;

You can "download" the file using the object Blob() (worked in Chrome, Firefox and Opera updated. IE11 and Edge did not have an effect. As Windows use, I did not test in Safari). In fact you are not downloading anything. The script generates a pseudo-file, includes in it a content and opens the download box for you to save.

function downloadDiv(filename, elementId, mimeType) {

    if ($('#teste').html() == "") {

        console.log("Erro!", "Teste está vazio.", "error");

    } else {

        var elementHtml = '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><style>.checker-hr {padding: 0px;margin: 0px;}</style>\n\n' + document.getElementById(elementId).innerHTML;
        var link = document.createElement('a');
        var file = new Blob([elementHtml], {type: mimeType});
        //mimeType = mimeType || 'text/plain';
        // nome do arquivo que vai ser baixado
        var fileName =  filename;
    
        link.setAttribute('download', fileName);
        link.href = URL.createObjectURL(file);
        link.click(); 

        console.log("Sucesso!", "Foi feito o download de teste com sucesso!", "success");

    }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel-body">
  <div id="teste"><div style="color: red;">div interna</div></div>
</div>
<button onclick="downloadDiv('teste.html', 'teste', 'text/plain')">Baixar arquivo</button>

Browser other questions tagged php javascript jquery

You are not signed in. Login or sign up in order to post.