Git Product home page Git Product logo

table-to-excel's Introduction

Table to Excel 2

Build Status

Export HTML table to valid excel file effortlessly. This library uses exceljs/exceljs under the hood to create the excel.
(Initial version of this library was using protobi/js-xlsx, it can be found here)

Installation

Browser

Just add a script tag:

<script type="text/javascript" src="../dist/tableToExcel.js"></script>

Node

npm install @linways/table-to-excel --save
import TableToExcel from "@linways/table-to-excel";

Usage

Create your HTML table as normal.
To export content of table #table1 run:

TableToExcel.convert(document.getElementById("table1"));

or

TableToExcel.convert(document.getElementById("table1"), {
  name: "table1.xlsx",
  sheet: {
    name: "Sheet 1"
  }
});

Check this pen for working example.

Cell Types

Cell types can be set using the following data attributes:

Attribute Description Possible Values
data-t To specify the data type of a cell s : String (Default)
n : Number
b : Boolean
d : Date
data-hyperlink To add hyper link to cell External URL or hyperlink to another sheet
data-error To add value of a cell as error

Example:

<!-- for setting a cell type as number -->
<td data-t="n">2500</td>
<!-- for setting a cell type as date -->
<td data-t="d">05-23-2018</td>
<!-- for setting a cell type as boolean. String "true/false" will be accepted as Boolean-->
<td data-t="b">true</td>
<!-- for setting a cell type as boolean using integer. 0 will be false and any non zero value will be true -->
<td data-t="b">0</td>
<!-- For adding hyperlink -->
<td data-hyperlink="https://google.com">Google</td>

Cell Styling

All styles are set using data attributes on td tags. There are 5 types of attributes: data-f-*, data-a-*, data-b-*, data-fill-* and data-num-fmt which corresponds to five top-level attributes font, alignment, border, fill and numFmt.

Category Attribute Description Values
font data-f-name Font name "Calibri" ,"Arial" etc.
data-f-sz Font size "11" // font size in points
data-f-color Font color A hex ARGB value. Eg: FFFFOOOO for opaque red.
data-f-bold Bold true or false
data-f-italic Italic true or false
data-underline Underline true or false
data-f-strike Strike true or false
Alignment data-a-h Horizontal alignment left, center, right, fill, justify, centerContinuous, distributed
data-a-v Vertical alignment bottom, middle, top, distributed, justify
data-a-wrap Wrap text true or false
data-a-indent Indent Integer
data-a-rtl Text direction: Right to Left true or false
data-a-text-rotation Text rotation 0 to 90
-1 to -90
vertical
Border data-b-a-s Border style (all borders) Refer BORDER_STYLES
data-b-t-s Border top style Refer BORDER_STYLES
data-b-b-s Border bottom style Refer BORDER_STYLES
data-b-l-s Border left style Refer BORDER_STYLES
data-b-r-s Border right style Refer BORDER_STYLES
data-b-a-c Border color (all borders) A hex ARGB value. Eg: FFFFOOOO for opaque red.
data-b-t-c Border top color A hex ARGB value.
data-b-b-c Border bottom color A hex ARGB value.
data-b-l-c Border left color A hex ARGB value.
data-b-r-c Border right color A hex ARGB value.
Fill data-fill-color Cell background color A hex ARGB value.
numFmt data-num-fmt Number Format "0"
"0.00%"
"0.0%" // string specifying a custom format
"0.00%;\(0.00%\);\-;@" // string specifying a custom format, escaping special characters

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

Exclude Cells and rows

To exclude a cell or a row from the exported excel add data-exclude="true" to the corresponding td or tr.
Example:

<!-- Exclude entire row -->
<tr data-exclude="true">
  <td>Excluded row</td>
  <td>Something</td>
</tr>

<!-- Exclude a single cell -->
<tr>
  <td>Included Cell</td>
  <td data-exclude="true">Excluded Cell</td>
  <td>Included Cell</td>
</tr>

Column Width

Column width's can be set by specifying data-cols-width in the <table> tag. data-cols-width accepts comma separated column widths specified in character count . data-cols-width="10,20" will set width of first coulmn as width of 10 charaters and second column as 20 characters wide.
Example:

<table data-cols-width="10,20,30">
  ...
</table>

Row Height

Row Height can be set by specifying data-height in the <tr> tag.
Example:

<tr data-height="42.5">
  <td>Cell 1</td>
  <td>Cell 2</td>
</tr>

Release Changelog

1.0.0

Migration Guide for migrating from V0.2.1 to V1.0.0

  • Changed the backend to Exceexceljs/exceljslJS
  • Added border color
  • Option to set style and color for all borders
  • Exclude row
  • Added text underline
  • Added support for hyperlinks
  • Text intent
  • RTL support
  • Extra alignment options
  • String "true/false" will be accepted as Boolean
  • Changed border style values
  • Text rotation values changed

1.0.2

  • Fixed bug in handling multiple columns merges in a sheet

1.0.3

  • Option to specify row height

table-to-excel's People

Contributors

dependabot[bot] avatar rohithb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

table-to-excel's Issues

Error when table has two columns

Hello, i have an error when using two columns

TypeError: e.columns[r] is undefined

I just modify the HTML on demo

<table id="simpleTable1" data-cols-width="70,15,10">
        <tbody>
          <tr>
            <th data-a-text-rotation="-45">Col 4 (date)</th>
            <th data-a-text-rotation="-90">Col 5</th>
          </tr>
          <tr>
            <td data-t="d">05-20-2018</td>
            <td data-t="n" data-num-fmt="$ 0.00">2210.00</td>
          </tr>
        </tbody>
      </table>

      <button id="button-excel">Create Excel</button>

Column for Currency

I am try to add currency in excel sheet but there is no option I could found for that. Can you add that option like other data-t="c" - for currency.

Date Datatype

After giving data type as date, the value exported to excel is the value of 1 day before.

Show visual cue when exporting

Hi, I'm using TableToExcel to download a table that can be sometimes pretty big, and it takes up to 10-15 seconds for the download to start. I've been tasked with showing some visual cue that the download is preparing. I'm using jQuery.
I've tried to change the style/color of the download icon right before calling TableToExcel, but it seems this change doesn't have time to be reflected on the page before TableToExcel starts processing, because the color changes once the download has finished.
Any idea how I can achieve that?
The only thing working is to display an alert, but ... that's not a great solution.

Thanks
Damien

Warnings when used with WebPack

I'm getting warnings when I try to use this library with vue2 and webpack.

warning in ./node_modules/@linways/table-to-excel/dist/tableToExcel.js
1:261-262 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

warning in ./node_modules/@linways/table-to-excel/dist/tableToExcel.js
1:290-294 Critical dependency: the request of a dependency is an expression

Not working in IE11

Hello,
the lib is perfect but it's not working on IE11, because of Object.assign.
I was trying to add the polyfill but still not working trowing the following error:

'Symbol' is undefined

Can somebody help?

Data pre-processing

In English locales it is common to separate thousands by using a comma ie 1000 -> 1,000, also for readability zeros are replaced with a '-' (see jquery datatables)

If you were to feed either of these numbers into the parser a NaN error would result with warning for end user.

Consider either a global or cell specific (when data type is numeric) processor.

A quick and dirty deals with the global (not ideal as there may be legitimate string uses for ','

function makeXLSXExport(tableId) {
  let table = document.querySelector("#"+tableId);
  let tableT = table.cloneNode(true);;
  tableT.innerHTML = tableT.innerHTML.replace(/,/g,''); //replaces , globally
  tableT.innerHTML = tableT.innerHTML.replace(/>-</g,'><'); //replaces cells only containing - globally
  TableToExcel.convert(tableT);
}

Comma or dollar symbol corrupting the excel.

My html table has currency value with dollar symbol($) and comma(,) as separator.
After exporting this to Excel, while opening excel is showing warning and also respective column has NaaN instead of data.

Table / Row level styling

Consider allowing inheritance of attributes from parents (ie table->row->cell or table->col->cell).

So instead of:

<table>
   <tr>
      <th data-a-wrap="true" data-f-bold="true"> Header</th>
      <th data-a-wrap="true" data-f-bold="true"> Header 2 </th>
      <th data-a-wrap="true" data-f-bold="true"> Header 3</th>
   </tr>
</table>

Support:

<table>
   <tr data-a-wrap="true" data-f-bold="true">
      <th> Header</th>
      <th> Header 2</th>
      <th> Header 3</th>
   </tr>
</table>

Critical dependency: the request of a dependency is an expression

Compiled with warnings.

./node_modules/@linways/table-to-excel/dist/tableToExcel.js
Critical dependency: the request of a dependency is an expression

I get the above warning when including as import TableToExcel from "@linways/table-to-excel", I'm using this in react with create-react-app.

I have also tried const TableToExcel = require("@linways/table-to-excel"); and import TableToExcel from "@linways/table-to-excel/dist/tableToExcel"; but get the same error.

How to add hyperlink?

Hi!
Anyone can help me?
I have a HTML with my table and I'm using style classes in td and/or tr. I need to add a hyperlink on cell, but I don't find how to do that.
Also, I will like to add more than one hyperlink at the same cell (td).
Anyone have any example to help me?

Percentage Values

Is it possible to use percentage values where you are including the % symbol in the html?

If i use a % symbol and then try to set the cell as data-t="n" is caused the cell to display "NaN"
If I do not add data-t="n" excel treats the cell as a text field.

Here is a code pen showing the problem I am currently experiencing

https://codepen.io/coxy121/pen/KKPNPoa

Cannot set property 'width' of undefined

Hi!

I'm implemted succesfully an app with table to excel export, with this approach:

TableToExcel.convert(document.getElementById("table_SP_HOME_VER_PARTE_LOGIS_227"));

in the attach file, that line works fine with table2.html, but when I want to implement a new table (table1.html) it fails with this error:

TableToExcel.convert(document.getElementById("table_SP_GRD_RENDICION_228"))
tableToExcel.js:2 Uncaught TypeError: Cannot set property 'width' of undefined
    at tableToExcel.js:2
    at Array.forEach (<anonymous>)
    at Object.parseDomToTable (tableToExcel.js:2)
    at Object.tableToSheet (tableToExcel.js:508)
    at Object.tableToBook (tableToExcel.js:508)
    at Object.convert (tableToExcel.js:508)
    at <anonymous>:1:14

I don't understand why...

thnks in advance!

examples.zip

One File, Multiple Sheets Per Table

Hi, how can I include multiple tables in one file separated by sheets?

I already tried using two TableToExcel functions with different IDs and sheet names with the same file name, but it ended up downloading two separate files instead.

Here's what I did:

let button = document.querySelector("#button-excel");

button.addEventListener("click", e => {
  TableToExcel.convert(document.querySelector("#table1"), {
  	name: "FileName.xlsx",
  	sheet: {
  		name: "Sheet 1"
  	}
  });
  TableToExcel.convert(document.querySelector("#table2"), {
  	name: "FileName.xlsx",
  	sheet: {
  		name: "Sheet 2"
  	}
  });
});

Are there any functions that can be used to make this possible?

Issue in col-width

Hi,
if the no of cells is less than the no of col widths specified an error is thrown.In my case i cannot predict no of cells in an excel.Is it possible to not throw an error?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.