Navel Pondering Mantra

    @hawjeh/js-to-excel

    1.0.10 • Public • Published

    JS to Table

    hawjeh/js-to-excel Build

    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:

    Install

    npm i @hawjeh/js-to-excel

    DownloadsWeekly Downloads

    2

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    3.05 MB

    Total Files

    14

    Last publish

    Collaborators

    • hawjeh