react-table-to-excel
v1.0.5
Published
'Экспортируйте HTML таблицу в Excel Ддокумент'. Модуль использует бибилотеку [exceljs/exceljs](https://github.com/exceljs/exceljs) для создания Excel документа.
Downloads
192
Readme
React table to Excel 2
'Экспортируйте HTML таблицу в Excel Ддокумент'. Модуль использует бибилотеку exceljs/exceljs для создания Excel документа.
Установка
Браузер
Добавьте код:
<script type="text/javascript" src="../dist/tableToExcel.js"></script>
Node
npm i react-table-to-excel
import TableToExcel from "react-table-to-excel";
Usage
Создайте HTML таблицу.
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
- Форк репозитория https://github.com/linways/table-to-excel/
1.0.2
- Добавлена поддержка чисел с разрядностью
- Обновлены зависимости
1.0.3
- Исправления ошибок
1.0.5
- Исправления ошибок