table2excel.js

Export html table to excel file in browser

Github星跟蹤圖

Table2Excel.js

This is a library to export html tables to excel sheets.

Precondition

It has to be a row * column table

Features

  1. able to export with width, alignment and colors
  2. extendable

Dependencies

ExcelJS

FileSaver.js

Live Demo

Demo

Include table2excel.js

npm

ExcelJS is peer dependency to table2excel.js, so you need to install exceljs first:

npm i exceljs

then, install table2excel.js:

npm i table2excel.js

use in your code like:

import Table2Excel from 'table2excel.js'
new Table2Excel('table').export()

you may also need a config in webpack:

node: { fs: 'empty' }

table2excel.min.js (with ExcelJS packed)

<script src="path/to/table2excel.min.js"></script>

table2excel.core.js (without ExcelJS packed)

<script src="path/to/exceljs.min.js"></script>
<script src="path/to/table2excel.core.js"></script>

Basic Usage

const table2Excel = new Table2Excel(selector, options)  // new Table2Excel('table')
table2Excel.export(fileName, extension) // table2Excel.export('my-exported-table', 'xlsx')

extension can be 'xls' or 'xlsx', default as 'xlsx'

selector

It's optional, and defaulted as 'table'

options

It's optional, and defaulted as:

{
  workbook: {
    views: [{
      x: 0, y: 0, width: 10000, height: 20000,
      firstSheet: 0, activeTab: 1, visibility: 'visible'
    }]
  },
  widthRatio: .14,
  plugins: [
    Table2Excel.plugins.fontPlugin,
    Table2Excel.plugins.fillPlugin,
    Table2Excel.plugins.formPlugin,
    Table2Excel.plugins.alignmentPlugin,
    Table2Excel.plugins.hyperlinkPlugin,
    Table2Excel.plugins.autoWidthPlugin
  ]
}

workbook is options used while creating a workbook, please refer exceljs#create-a-workbook for details.

widthRatio is a ratio that will be used while converting width style of html table cells to width of sheet cells.

Plugins

Plugin helps to extend the ability of transforming table to excel.

Build-in plugins can be access like:

Table2Excel.plugins.fontPlugin,
Table2Excel.plugins.fillPlugin,
Table2Excel.plugins.formPlugin,
Table2Excel.plugins.alignmentPlugin,
Table2Excel.plugins.hyperlinkPlugin,
Table2Excel.plugins.autoWidthPlugin

A plugin can be defined to join different phase of table to excel process, and in different phase, plugin is able to access different objects from context.

{
  /**
   * after an empty workbook created
   * @param  {ExcelJS.Workbook} context.workbook
   * @param  {NodeList} context.tables   
   */
  workbookCreated ({ workbook, tables }) {},
  /**
   * after an empty worksheet created
   * @param  {ExcelJS.Workbook} workbook
   * @param  {NodeList} tables
   * @param  {ExcelJS.Worksheet} worksheet
   * @param  {HTMLTableElement} table
   */
  worksheetCreated ({ workbook, tables, worksheet, table }) {},
  /**
   * after a worksheet been filled with data from table
   * @param  {ExcelJS.Workbook} workbook
   * @param  {NodeList} tables
   * @param  {ExcelJS.Worksheet} worksheet
   * @param  {HTMLTableElement} table
   */
  worksheetCompleted ({ workbook, tables, worksheet, table }) {},
  /**
   * after an cell of worksheet created
   * @param  {ExcelJS.Workbook} workbook
   * @param  {NodeList} tables
   * @param  {ExcelJS.Worksheet} worksheet
   * @param  {HTMLTableElement} table
   * @param  {ExcelJS.Cell} workcell
   * @param  {HTMLTableCellElement} cell
   * @param  {colRange} [from, to]
   * @param  {rowRange} [from, to]
   */
  workcellCreated ({ workbook, tables, worksheet, table, workcell, cell, cellStyle, colRange, rowRange }) {}
}

Example 1, you can define a plugin to make some rows or columns hidden of exported excel:

const table2Excel = new Table2Excel('table', {
  plugins: [{
    worksheetCompleted ({ workbook, tables, worksheet, table }) {
      worksheet.getRow(1).hidden = true
      worksheet.getColumn(1).hidden = true
    }
  }]
})

Example 2, you can add your customized cell parser for your table:

const table2Excel = new Table2Excel('table', {
  plugins: [{
    workcellCreated ({ workbook, tables, worksheet, table, workcell, cell, cellStyle, rowRange, colRange }) {
      workcell.value = { text: '', link: '' }
      workcell.style = {
        ...workcell.style,
        font: {},
        color: {}
      }
    }
  }]
})

主要指標

概覽
名稱與所有者JackGit/table2excel.js
主編程語言JavaScript
編程語言JavaScript (語言數: 1)
平台
許可證
所有者活动
創建於2017-11-01 02:23:54
推送於2019-04-23 00:55:59
最后一次提交2019-04-23 08:55:51
發布數0
用户参与
星數139
關注者數7
派生數60
提交數43
已啟用問題?
問題數29
打開的問題數12
拉請求數1
打開的拉請求數0
關閉的拉請求數0
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?