How to export html table to excel using javascript

by

Check https://github.com/linways/table-to-excel.
Its a wrapper for exceljs/exceljs to export html tables to xlsx. 

TableToExcel.convert(document.getElementById("simpleTable1"));
<script src="https://cdn.jsdelivr.net/gh/linways/[email protected]/dist/tableToExcel.js"></script>
<table id="simpleTable1" data-cols-width="70,15,10">
<tbody>
    <tr>
        <td class="header" colspan="5" data-f-sz="25" data-f-color="FFFFAA00" data-a-h="center" data-a-v="middle" data-f-underline="true">
            Sample Excel
        </td>
    </tr>
    <tr>
        <td colspan="5" data-f-italic="true" data-a-h="center" data-f-name="Arial" data-a-v="top">
            Italic and horizontal center in Arial
        </td>
    </tr>
    <tr>
        <th data-a-text-rotation="90">Col 1 (number)</th>
        <th data-a-text-rotation="vertical">Col 2</th>
        <th data-a-wrap="true">Wrapped Text</th>
        <th data-a-text-rotation="-45">Col 4 (date)</th>
        <th data-a-text-rotation="-90">Col 5</th>
    </tr>
    <tr>
        <td rowspan="1" data-t="n">1</td>
        <td rowspan="1" data-b-b-s="thick" data-b-l-s="thick" data-b-r-s="thick">
            ABC1
        </td>
        <td rowspan="1" data-f-strike="true">Striked Text</td>
        <td data-t="d">05-20-2018</td>
        <td data-t="n" data-num-fmt="$ 0.00">2210.00</td>
    </tr>

    <tr>
        <td rowspan="2" data-t="n">2</td>
        <td rowspan="2" data-fill-color="FFFF0000" data-f-color="FFFFFFFF">
            ABC 2
        </td>
        <td rowspan="2" data-a-indent="3">Merged cell</td>
        <td data-t="d">05-21-2018</td>
        <td data-t="n" data-b-a-s="dashed" data-num-fmt="$ 0.00">230.00</td>
    </tr>
    <tr>
        <td data-t="d">05-22-2018</td>

        <td data-t="n" data-num-fmt="$ 0.00">2493.00</td>
    </tr>

    <tr>
        <td colspan="4" align="right" data-f-bold="true" data-a-h="right" data-hyperlink="https://google.com">
            <b><a href="https://google.com">Hyperlink</a></b>
        </td>
        <td colspan="1" align="right" data-t="n" data-f-bold="true" data-num-fmt="$ 0.00">
            <b>4933.00</b>
        </td>
    </tr>
    <tr>
        <td colspan="4" align="right" data-f-bold="true" data-a-rtl="true">
            مرحبا
        </td>
        <td colspan="1" align="right" data-t="n" data-f-bold="true" data-num-fmt="$ 0.00">
            <b>2009.00</b>
        </td>
    </tr>
    <tr>
        <td data-b-a-s="dashed" data-b-a-c="FFFF0000">All borders</td>
    </tr>
    <tr>
        <td data-t="b">true</td>
        <td data-t="b">false</td>
        <td data-t="b">1</td>
        <td data-t="b">0</td>
        <td data-error="#VALUE!">Value Error</td>
    </tr>
    <tr>
        <td data-b-t-s="thick" data-b-l-s="thick" data-b-b-s="thick" data-b-r-s="thick" data-b-t-c="FF00FF00" data-b-l-c="FF00FF00" data-b-b-c="FF00FF00" data-b-r-c="FF00FF00">
            All borders separately
        </td>
    </tr>
    <tr data-exclude="true">
        <td>Excluded row</td>
        <td>Something</td>
    </tr>
    <tr>
        <td>Included Cell</td>
        <td data-exclude="true">Excluded Cell</td>
        <td>Included Cell</td>
    </tr>
</tbody>
</table>

This creates valid xlsx on the client side. Also supports some basic styling. Check https://codepen.io/rohithb/pen/YdjVbb for a working example.

More Related Contents:

  1. Set cookie and get cookie with JavaScript [duplicate]
  2. contenteditable, set caret at the end of the text (cross-browser)
  3. Chrome extension – retrieving global variable from webpage
  4. JSFiddle code not working in my own page
  5. All About…. Z-Index?
  6. How to calculate the XPath position of an element using Javascript?
  7. How do I escape a single quote ( ‘ ) in JavaScript? [duplicate]
  8. Detecting if a browser is using Private Browsing mode
  9. how to show alternate image if source image is not found? (onerror working in IE but not in mozilla) [duplicate]
  10. Uncaught Error: SECURITY_ERR: DOM Exception 18 when I try to set a cookie
  11. How to start automatic download of a file in Internet Explorer?
  12. Coordinates of selected text in browser page
  13. canvas2d toDataURL() different output on different browser
  14. How can I execute a python script from an html button?
  15. Chrome Autofill/Autocomplete no value for password
  16. Set content of iframe
  17. How to print HTML content on click of a button, but not the page? [duplicate]
  18. React: why child component doesn’t update when prop changes
  19. How To Show And Hide Input Fields Based On Radio Button Selection
  20. Measure distance between two HTML elements’ centers
  21. Onclick reload the div only
  22. How to create checkbox inside dropdown?
  23. Error message “DevTools failed to load SourceMap: Could not load content for chrome-extension://…”
  24. How to flip images horizontally with HTML5
  25. clearing circular regions from HTML5 Canvas
  26. How to check if HTML5 audio has reached different errors
  27. Changing cursor to waiting in javascript/jquery
  28. Returning value from confirmation dialog using JQuery UI dialog
  29. HTML5 Video autoplay with sound unmuted
  30. How do I put a clear button inside my HTML text input box like the iPhone does?

Leave a Comment