How to create a table in excel from HTML content using javascript when there is no HTML table used?

Question

I have a HTML page. This has a grid created using DIV tags and display property set as table and inner DIV's having display properties as table-row and table-cell. If I need to export such table to excel, is there a way to do it in JavaScript? As of now only way I could think of is rewriting those DIV into html TABLE tags.

<div class="tablediv" id="tablediv">
<div class="tablerow">
<div class="tablecell">
A
</div>
<div class="tablecell">
B
</div>
</div>

<div class="tablerow">
<div class="tablecell">
1
</div>
<div class="tablecell">
2
</div>
</div>
</div>

.tablediv {
  display: table;
}
.tablerow {
  display: table-row;
}
.tablecell {
  display: table-cell;
}

@Bitz Answers in those links wouldn't work for this question. As mentioned in the question, grid is not created using html TABLE tag but is created using DIV tags. There is no TABLE tag. When export to excel, such grid doesn't show up as grid in excel. — fcmaine
– fcmaine, Commented Aug 24, 2017 at 20:42

Farhad Bagherlo · Accepted Answer · 2017-08-24 21:46:42Z

1

$("#btnExport").click(function(e) {

  //Convert DivTable to Table
   let TBLDiv=$("<div/>",{id:"TBLDivMain"});
   let TBL=$("<table/>");
   let TBO=$("<tbody/>");
   $('#tablediv .tablerow').each(function(key,value){
      let TR=$('<tr/>');
      $(value).find(".tablecell").each(function(key,value){
        let TD=$('<td/>',{text:$(value).text()});
        TR.append(TD);
      });
     TBO.append(TR);
    });
    TBL.append(TBO);
    TBLDiv.append(TBL);
    
    //Export to Excel
    var file = new Blob([TBLDiv.html()], {type:"application/vnd.ms-excel"});
    var url = URL.createObjectURL(file);
    var a = "<a id='Dow' href='"+url+"' download='filename.xls' ></a>";
    $("body").append(a);
    var CickDownload= document.getElementById('Dow');
    CickDownload.click();
    $("body #Dow").remove();
    e.preventDefault();
});

.tablediv {
  display: table;
}
.tablerow {
  display: table-row;
}
.tablecell {
  display: table-cell;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
<br/>
<br/>

<div class="tablediv" id="tablediv">
    <div class="tablerow">
      <div class="tablecell">A</div>
      <div class="tablecell">B</div>
    </div>
    <div class="tablerow">
       <div class="tablecell">1</div>
       <div class="tablecell">2</div>
    </div>
</div>

edited Aug 24, 2017 at 21:46

answered Aug 24, 2017 at 20:48

Farhad Bagherlo

6,6993 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fcmaine Over a year ago

thanks for the answer. But my table is created using <div>'s and not <table>. I've now added code to my question.

Farhad Bagherlo Over a year ago

You can not easily save the div in the excel. One method is to read the div,s and create a runTime table and then output the same way as above.

Collectives™ on Stack Overflow

How to create a table in excel from HTML content using javascript when there is no HTML table used?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related