@hawjeh/js-to-excel

JS to Table

A javascript tool to export HTML table / JSON to valid excel file effortlessly. This library uses exceljs/exceljs under the hood to create the excel.

Sample Table

Visit here

or

Checkout the sample project in the repo

Installation / Usage

Browser

Just add a script tag:

<script type="text/javascript" src="./dist/JsToExcel.html.js"></script>
<script>
    const { exportHtmlToExcel } = window.JsToExcel;
    function init() {
        JsToExcel.exportHtmlToExcel(document.getElementById('table1'));
    }
    
    function init_with_name() {
        JsToExcel.exportHtmlToExcel(document.getElementById('table1'), {
            name: 'new_excel.xlsx',
            saveLocal: false,
            sheet: {
                name: "My Sheet 1"
            }
        });
    }
</script>

Node

npm install @hawjeh/js-to-excel --save

import { exportHtmlToExcel, exportJsonToExcel } from "@hawjeh/js-to-excel";

const onExportHtmlClick = () => {
    const table = window.document.getElementById('entry-table');
    exportHtmlToExcel(table);
}

const onExportJsonClick = () => {
    exportJsonToExcel('{"options":{"showHeader":true,"globalStyles":{},"headerStyles":{},"rowStyles":[]},"keys": ["Header1"],"rows":[{"Header1":"Val1"},{"Header1":"Val1"},{"Header1":"Val1"},{"Header1":"Val1"]}', {
    name: 'C:\\export.xlsx',
    saveLocal: true
    })
}

or

Run the sample project:

npm install @hawjeh/js-to-excel --save
cd ./node_modules/@hawjeh/js-to-excel
npm install && npm run start

Then open browser and go to http://localhost:8080

Example HTML:

Check the file here: src/test/index.html

Cell

Cell can be set using the following data attributes:

Attribute	Description	Values
data-type	To specify the data type of a cell	s : String (Default) n : Number b : Boolean d : Date https://: Hyperlink
numFmt	Number Format	"0", "0.00%", "0.0%"
data-exclude	Exclude Cell

Example:

<!-- For setting a cell type as number -->
<td data-type="n">2500</td>

<!-- For setting a cell type as number with format -->
<td data-type="n" data-fmt="0.00">12345</td>

<!-- For setting a cell type as date -->
<td data-type="d">05-23-2018</td>

<!-- For setting a cell type as boolean -->
<td data-t="b">true</td>

<!-- For setting a cell type as hyperlink -->
<td data-type="https://google.com">Google</td>

<!-- For excluding a cell -->
<td data-exclude="true">Exclude me</td>

Cell Styling

Cell styling can be set using the following data attributes:

Cell Font Styling:

Attribute	Description	Values
data-f-name	To specify font-name	"Calibri", "Arial", "Times"
data-f-size	To specify font-size	"11" // font size in points
data-f-color	To specify font-color	A hex ARGB value. Eg: FFFFOOOO for opaque red
data-f-bold	To bold font	False (Default) or True
data-f-italic	To italic font	False (Default) or True
data-f-strike	To strike through font	False (Default) or True
data-f-underline	To underline font	False (Default) or True

Example:

<!-- For setting a cell font name, size and color -->
<td data-f-name="Arial" data-f-size="14" data-f-color="FFFF0000" >Arial, Size 14, Red Text</td>

<!-- For setting a cell bold, italic, strike and underline -->
<td data-f-bold="true">Bold</td>
<td data-f-italic="true">Italic</td>
<td data-f-strike="true">Strike Through</td>
<td data-f-underline="true">Underline</td>

Cell Alignment:

Attribute	Description	Values
data-a-hori	To set horizontal alignment	left (Default), center, right, fill, justify, centerContinuous, distributed
data-a-vert	To set vertical alignment	top (Default), middle, bottom, distributed, justify
data-a-wrap	To determine wrap text	False (Default) or True
data-a-indt	To determine text indent	"0" // integer
data-a-rtl	To determine text direction	False (Default) - left to right or True - right to left
data-a-stf	To determine shrink to fit	False (Default) or True
data-a-rota	To determine text rotation	"" (Default), "0 to 90", "-1 to -90", "vertical"

Example:

<!-- For setting a cell align center horizontal -->
<td data-a-hori="center">Horizontal Center</td>

<!-- For setting a cell align bottom vertical -->
<td data-a-vert="bottom">Vertical Bottom</td>

<!-- For setting a cell wrap text -->
<td data-a-wrap="true">Wrap Text</td>

<!-- For setting a cell to indent by 10 -->
<td data-a-indt="10">Indent 10</td>

<!-- For setting a cell direction from right to left -->
<td data-a-rtl="true">Right to left</td>

<!-- For setting a cell shrink to fit -->
<td data-a-stf="true">Shrink to fit</td>

<!-- For setting a cell rotation -->
<td data-a-rota="vertical">Vertical Rotate</td>

Cell Border:

Attribute	Description	Values
data-b-style	To set border style	Check BORDER_STYLES
data-b-style-color	To set border color	A hex ARGB value. Eg: FFFFOOOO for opaque red
data-b-side-all	To set border for all sides
data-b-side-top	To set border for top only
data-b-side-bottom	To set border for bottom only
data-b-side-left	To set border for left only
data-b-side-right	To set border for right only

BORDER_STYLES: thin, dotted, dashDot, hair, dashDotDot, slantDashDot, mediumDashed, mediumDashDotDot, mediumDashDot, medium, double, thick

Example:

<!-- For setting a cell bordered -->
<td data-b-side-all="">Bordered</td>

<!-- For setting a cell bordered left and right with dotted style -->
<td data-b-side-left="" data-b-side-right="" data-b-style="dotted">Dotted left and right</td>

<!-- For setting a cell bordered top only with color red -->
<td data-b-side-top="" data-b-style-color="FFFF0000">Top Red Only</td>

<!-- For setting a cell bordered bottom only with double line style -->
<td data-b-side-bottom="" data-b-style="double">Bottom Double</td>

Inspired by:

• ExcelJS
• @linways/table-to-excel