How to download the file with inner.HTML changes?

Question

I did some functions with onclick to replace a div (fill with an image), but how do I download the file with this change made? My idea is to make a Landing Page generator, after the changes I can download the file with the changes made PS: Code is not indented yet, was testing logic

<body>
    

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Select Image</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">

        <ul id="tipo">
            
            <li>
                <div class="seila">
                    <img  id="banner01" onclick="substituir01()" src="https://t3.ftcdn.net/jpg/05/23/38/92/360_F_523389242_J7wqy8fPTHseIDh2tALZEk3qQGhh6LKc.jpg" width="100px" height="100px">
                </div>
            </li>

            <li>
                <div class="seila">
                    <img  class="banner02" onclick="substituir02()"  src="https://gomake.com.br/wp-content/uploads/2019/06/logo_ads-900x450.jpg" width="100px" height="100px">
                </div>
            </li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

<div class="example">
    image select
    <div id="img-example">
    </div>
</div>

<script>
    this.$(".btnCustom").click(function() {
        var value = $(this).attr('id');
          $("#myModal #selection option[value="+value+"]").attr('selected', 'selected');
});

    function substituir01(){
        document.getElementById('img-example').innerHTML = "<img src=\"https://t3.ftcdn.net/jpg/05/23/38/92/360_F_523389242_J7wqy8fPTHseIDh2tALZEk3qQGhh6LKc.jpg\" width=\"500px\">";
    }
    function substituir02(){
        document.getElementById('img-example').innerHTML = "<img src=\"https://gomake.com.br/wp-content/uploads/2019/06/logo_ads-900x450.jpg\" width=\"500px\">";
    }

</script>


</body>

score 0 · Answer 1 · answered Oct 22 '22 at 17:17

0

You may use this code from https://stackoverflow.com/a/18197341/3807365

(Snippet won't work here because it's sandboxed but here's a working fiddle)

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

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

  element.click();

  document.body.removeChild(element);
}

function download_html() {
  var html = document.body.outerHTML;

  download("my-file.html", html);
}

<h1>hello world</h1>
<div contenteditable="true">you can edit me!</div>
<br>
<button onclick="download_html()">download html</button>

answered Oct 22 '22 at 17:17

IT goldman

14,885
2
14
28

this is amazing! Helped me a lot. One question, would you be able to download the css together? – Matheus Rodrigues Oct 24 '22 at 16:47
you can `download("my-file.html", text_string);` any text – IT goldman Oct 24 '22 at 16:51
Okay, if the css is not in the same document, would it be download("my-file.html", style)? and, if separated, what would it be like? Example: style.css – Matheus Rodrigues Oct 24 '22 at 16:55
because when I download the HTML, it comes without the css formatting – Matheus Rodrigues Oct 24 '22 at 17:08
you mean how to extract css formatting from html element(s)? it's not simple – IT goldman Oct 24 '22 at 17:22
Yes, if you could bring the css with the file download :c – Matheus Rodrigues Oct 24 '22 at 17:53
that should be a question on its own. maybe something with `getComputedStyle` would do the trick but it won't be pretty css – IT goldman Oct 24 '22 at 19:48

How to download the file with inner.HTML changes?

1 Answers1