react-xlsx-sheet

react component for work sheet

yarn demo #查看demo
yarn test #执行测试用例

查看 demo

基本用法

DOM element

import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom'
import XLSX from 'xlsx'
import { ExportSheet } from 'react-xlsx-sheet'
const head = [
 { title: '排序', dataIndex: 'sort' },
 { title: '母商品ID', dataIndex: 'parentItemId' },
 { title: '子商品ID', dataIndex: 'itemId' },
 { title: '商品名称', dataIndex: 'itemName' },
 { title: '市场售价', dataIndex: 'originPrice' },
 { title: '可售库存', dataIndex: 'stock' },
 { title: '当前售价', dataIndex: 'skuPrice' },
 { title: '商品状态', dataIndex: 'itemStatus' },
 { title: '活动状态', dataIndex: 'itemTopicStatus' },
]
const data = [{
 "activitySales": null,
 "categoryId": null,
 "id": "30",
 "itemId": "228377",
 "itemImgUrl": "http://image.seecsee.com/python/ec_crawler/1688/c93345294ffea88c27cb9e2add3c26d9.jpeg",
 "itemName": "曲奇佰味葫芦蔓越莓曲奇200g巧克力零食抹茶手工烘焙饼干微商代发",
 "itemStatus": 1,
 "itemTopicStatus": 1,
 "originPrice": 40000,
 "parentItemId": "228209",
 "skuPrice": "3039",
 "sort": 111,
 "stock": 40717,
 "topicId": null,
 "__typename": "CategoryCommodity"
}]
<ExportSheet
 header={head}
 fileName={`分类商品`}
 dataSource={data}
 xlsx={XLSX}
>
 <button>对象数组</button>
</ExportSheet>

React Component

import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom'
import XLSX from 'xlsx'
import { ExportSheet } from 'react-xlsx-sheet'
const array = [
 ["排序", "母商品ID", "子商品ID", "商品名称", "市场售价"],
 [30, 228209, 228377, "曲奇佰味葫芦蔓越莓曲奇200g巧克力零食抹茶手工烘焙饼干微商代发", 40000],
 [29, 228209, 228369, "超管 斜挎包 售价为 0.01哦快快快快快有三个物流路线", 40000],
 [30, 228209, 228377, "外仓库囤货 手拿包 170608", 40000]
]
const App = (props) => (
 <button
 onClick={props.exportsheet}
 >React Component</button>
)
<ExportSheet
 dataType="Array-of-Arrays"
 fileName={`分类商品`}
 dataSource={array}
 isDOMElement={false}
 xlsx={XLSX}
>
 <App />
</ExportSheet>

数据源是一个 table 元素

const Table = () => (
 <table id="sheetjs">
 <tbody>
 <tr>
 <td>S</td>
 <td>h</td>
 <td>e</td>
 <td>e</td>
 <td>t</td>
 <td>J</td>
 <td>S</td>
 </tr>
 <tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>
 <td>4</td>
 <td>5</td>
 <td>6</td>
 <td>7</td>
 </tr>
 <tr>
 <td>2</td>
 <td>3</td>
 <td>4</td>
 <td>5</td>
 <td>6</td>
 <td>7</td>
 <td>8</td>
 </tr>
 </tbody>
 </table>
);
class WithTable extends React.Component {
 state = {
 table: null,
 };
 componentDidMount() {
 this.setState({
 table: document.querySelector('#sheetjs'),
 });
 }
 render() {
 return (
 <>
 <Table />
 <ExportSheet
 dataType="Table-Node-Element"
 fileName={`table`}
 tableElement={this.state.table}
 xlsx={XLSX}
 >
 <button>Table Input</button>
 </ExportSheet>
 </>
 );
 }
}

ps:其他功能组件还在开发中