cx690 / table2canvas

Draw table on canvas for node and browser!

Draw table on canvas! Can be used both of node and browser.

Install

• node (Must install canvas) npm install canvas table2canvas or yarn add canvas table2canvas

• browser npm install table2canvas or yarn add table2canvas

Usage

• node

import { Canvas } from 'canvas';
import Table2canvas from 'table2canvas';
import fs from 'fs';

const columns = [
    {
        title: 'name',
        children: [
            {
                title: 'first',
                dataIndex: 'first'
            },
            {
                title: 'last',
                dataIndex: 'last',
                render: (text, row, i) => {
                    if (i === 0) {
                        return { text, rowSpan: 3 }
                    }
                    if (i === 1) {
                        return { text, rowSpan: 0 }
                    }
                    if (i === 2) {
                        return { text, rowSpan: 0 }
                    }
                    return text;
                }
            }
        ]
    },
    { title: 'age', dataIndex: 'age', textAlign: 'center', textColor: 'blue' },
    { title: 'weight', dataIndex: 'weight', render: '{c}kg' },
    { title: 'address', dataIndex: 'address', width: 200 },
    {
        title: 'other-abcd',
        children: [
            {
                title: 'a',
                dataIndex: 'a',
                render: (text, row, i) => {
                    if (i === 2) {
                        return { text, colSpan: 2, rowSpan: 2 }
                    }
                    if (i === 3) {
                        return { text, colSpan: 0, rowSpan: 0 }
                    }
                    return text;
                }
            },
            {
                title: 'b',
                dataIndex: 'b',
                render: (text, row, i) => {
                    if (i === 2 || i === 3) {
                        return { text, colSpan: 0, rowSpan: 0 }
                    }
                    return text;
                }
            },
            {
                title: 'c+d',
                children: [
                    {
                        title: 'c',
                        dataIndex: 'c'
                    },
                    {
                        title: 'd',
                        dataIndex: 'd'
                    }
                ]
            }
        ]
    }
]

const dataSource: any[] = [
    { first: 'Jack', last: 'smith', age: 16, weight: 50, address: '1.somewhere\n2.somewhere', a: 'a1', b: 'b1', c: 'c1', d: 'd1' },
    { first: 'Jack', last: 'smith', age: 26, weight: 60, address: 'street9527123456789no.,it is a to long adress!', a: 'a2', b: 'b2', c: 'c2', d: 'd2' },
    { first: 'Jack', last: 'last', age: 36, weight: 70, address: 'where', a: 'merge-a+b\nline2\nline3', b: 'merge-a+b', c: 'c3', d: 'd3' },
    { first: 'Tom', last: 'last', age: 46, weight: 80, address: 'where', a: 'merge-a+b', b: 'merge-a+b', c: 'c4', d: 'd4' },
]

const table = new Table2canvas({
    canvas: new Canvas(2, 2),
    columns: columns,
    dataSource: dataSource,
    bgColor: '#fff',
    text: 'This is table title!',
})

const buffer = table.canvas.toBuffer();

fs.writeFileSync('demo.png', buffer);

result:demo.png

• browser

import Table2canvas from 'table2canvas';

const columns = [...]

const dataSource = [...]

const table = new Table2canvas({
    canvas: document.createElement('canvas'),
    ...     
});

document.body.appendChild(table.canvas);

Options

TableOpt

Property	Description	type	Default	Required
canvas	Draw table to whitch canvas	Canvas | HTMLCanvasElement	-	yes
width	canvas's width	number | 'auto'	'auto'	no
height	canvas's height	number | 'auto'	'auto'	no
bgColor	canvas's background color	string	'transparent'	no
padding	Table in canvas's padding	number | number[]	10	no
columns	columns config	IColumn[]	-	yes
dataSource	dataSource for table	Record<string,any>	-	-
style	Table's style	TableStyle	...	no
text	Table's title	string	-	no
textStyle	Table's title style(color,fontSize,fontFamily,textAlign,lineHeight)	TextStyle	...	no

IColumn

Property	Description	type	Default	Required
title	Table's td text	string	-	yes
dataIndex	Display field of the data recordg	string	-	no
titleColor	title's color	string	'rgba(0,0,0,0.85)'	no
titleFontWeight	title's font weight	string	'bold'	no
titleFontSize	title's font size	string	inherit TableStyle.fontSize	no
textAlign	The specify which way that column is aligned	'left' | 'right' | 'center'	'left'	no
textColor	Color of column's body	string	'rgba(0,0,0,0.85)'	no
textFontWeight	font weight of column's body	string	''	no
textFontSize	font size of column's body	string	inherit TableStyle.fontSize	no
textOverflow	text overflow show type	'auto' | 'ellipsis'	'auto'	no
width	Width of this column	number	defaultStyle.columnWidth	no
children	Group table head	IColumn[]	-	no
render	custom render,if is string,{c} is row[dataIndex]	string | Function	-	no

TableStyle

Property	Description	type	Default	Required
columnWidth	default width of all columns	number	150	no
borderColor	color of border	string	'#e8e8e8'	no
textAlign	The specify which way that column is aligned	string	'left'	no
color	color of table	string	'rgba(0,0,0,0.85)'	no
fontSize	fontSize of table	string	'14px'	no
fontFamily	fontFamily of table	string	'sans-serif'	no
headerBgColor	background color of header cell	string	'rgba(0,0,0,0.02)'	no
background	background color of table	string	-	no
padding	padding of table cell	number | number[]	16	no
lineHeight	text lineHeight	number	22	no