Download element in html using javascript

Question

I'm trying to download all content inside div tag using javascript

Here is the markup:

<div class="col-md-12" id="invoice">
    <div class="row">
        <div class="col">
        
            <p>My Name</p>
            <p>My Email</p>
            <p>My Address</p>
        </div>
        <div class="col">
            <h6>Number</h6>
            <br />
            <p>2021</p>
            <br />
            <h6>Another Number</h6>
            <br />
            <p>2021</p>
        </div>
        <div class="col">
            <h6>Date</h6>
            <br />
            <p>9/14/2021</p>
            <br />
            <h6>Terms</h6>
            <br />
            <p>30</p>
        </div>
    </div>


    <table class="table-bordered">
        <thead>
            <tr>
                <th>th1</th>
                <th>th2</th>
                <th>th3</th>
                <th>th4</th>
            </tr>
        </thead>
        <tbody>
           <tr>
               <td>
                 content1
               </td>
               <td>
                   content2
               </td>
               <td>
                   content3
               </td>
               <td>
                   content4
               </td>
               
           </tr>
        </tbody>

    </table>
 
</div>

Here is my javascript code:

    function downloadMyElement() {
   var MyElement=document.getElementById('invoice').innerHTML;
        var filename = "MyElement.html";
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(MyElement));
        element.setAttribute('download', filename);
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);

    }

the result:

the table didn't display and not the same design I think my code in javascript didn't read the tags.

How can I get the same design of my markup?

To offer the browser to obtain the HTML text of your element, albeit without suggesting the filename or forcing the download action, the following alone will do: `location = URL.createObjectURL(new Blob([ document.getElementById('invoice').innerHTML ], "text/html"))` — Armen Michaeli, Sep 14 '21 at 09:03
@Quentin I have stylesheet in folder and call it in the html file. Do you have any source for how to add it to javascript, please? — sameeh shadid, Sep 14 '21 at 09:11
@sameehshadid — Presumably the stylesheet is in the `` so it isn't inside the `innerHTML` of the `div`… — Quentin, Sep 14 '21 at 09:17
@Quentin I have stylsheet in my project and when I display the page worked well with design but when download it shown like the picture above. — sameeh shadid, Sep 14 '21 at 09:23
@sameehshadid — Yes, you said that and I explained why that's the case in my previous comment. — Quentin, Sep 14 '21 at 09:24
Exactly. So it won't be inside `document.getElementById('invoice').innerHTML`, will it? — Quentin, Sep 14 '21 at 09:28

iamdlm · Answer 1 · 2021-09-14T09:24:06.283

1

The correct method is innerHTML, not innerHtml (names in JavaScript are case-sensitive):

var MyElement = document.getElementById('invoice').innerHTML;

(JSFiddle)

If you want to include the parent div element named "invoice", you should use outerHTML.

For including the styles you'll have to play around with getComputedStyle. Chech this answer.

edited Sep 14 '21 at 09:24

answered Sep 14 '21 at 08:41

iamdlm

1,885
1
11
21

1

Thanks for correcting me but same issue, in the output didn't divide the `div` into columns and table didn't show. – sameeh shadid Sep 14 '21 at 08:50
See my edit for including the parent div. – iamdlm Sep 14 '21 at 08:57
I tried this [link](https://jsfiddle.net/5fp2sybc/) now but gave the same thing. I think the problem that the javascript doesn't read the stylsheet. Do you have any idea for how to add the stylesheet in javascript?\ – sameeh shadid Sep 14 '21 at 09:13
Added to the answer some links. Check them out. – iamdlm Sep 14 '21 at 10:27
still the same. is there anyway to get the tags inside the `div` with their styles? Like if I have `
` how can I get the button to appear in the downloaded file – sameeh shadid Sep 14 '21 at 12:32

Download element in html using javascript

1 Answers1