记录解决几个前端小问题的过程

今天的主要工作都在用react.js写一些前端界面，中间遇到了一些问题，这里解决这些问题的过程记录一下。

使用echarts图表组件

由于项目比较老旧，并没有使用webpack、gulp之类的前端编译工具进行编译，而是直接将依赖的javascript库引入，如下所示：

<body>
<div id="reactHolder"></div>
<script type="text/javascript" src="${ctx}/script/lodash/lodash.min.js"></script>
<script type="text/javascript" src="${ctx}/script/react/react.min.js"></script>
<script type="text/javascript" src="${ctx}/script/react/react-dom.min.js"></script>
<script type="text/javascript" src="${ctx}/script/antd/antd.min.js"></script>
<script type="text/javascript" src="${ctx}/script/moment/moment.min.js"></script>
<script type="text/javascript" src="${ctx}/script/axios/axios.min.js"></script>

<!-- 将应用上下文路径存入js变量 -->
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<script type="text/javascript">
    var __CTX_PATH__='${ctx}';
</script>

<!-- 将ES6语法的js翻译为ES5 -->
<script type="text/javascript" src="${ctx}/script/babel-core/browser.min.js"></script>

<script type="text/babel" src="${ctx}/script/app1.jsx"></script>
</body>

由于项目需求，需要使用图表组件，自然想到使用echarts, 找了下echarts的reactjs包装npm库，找到echarts-for-react。可看了下echarts-for-react的源码，它虽然是用webpack编译的，但并没有使用umd格式打包这个库，这样如果不用webpack或browserify等工具编译，这个库无法直接引入jsp页面使用。想了下，可以手动将echarts-for-react编译打包为umd格式，于是将其源码clone下来，简单改了改webpack.config.js, 以打出umd格式的库文件，如下：

  ...
  entry: './src/echarts-for-react.js',
  output: {
    path: './dist',
    filename: 'echarts-for-react.min.js',
    library: 'ReactEcharts',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  externals: [
    {
        "react": {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react'
        }
    },
    'echarts'
  ],
  ...

最后引入jsp文件。

...
<script type="text/javascript" src="${ctx}/script/echarts/echarts.min.js"></script>
<script type="text/javascript" src="${ctx}/script/echarts-for-react/echarts-for-react.min.js"></script>
...

在jsx文件里使用方法如下：

const ReactEcharts = window.ReactEcharts;

class Demo extends React.Component{
    getChartOptions(){
        // echarts的options格式可参考http://echarts.baidu.com/option.html
        return {
            ...
        }
    }
    render(){
        return <ReactEcharts option={this.getChartOptions()} notMerge={true} />
    }
}

将页面中的Table导出为Excel

页面中已经使用了antd的Table组件，但希望将这些Table导出为Excel文件，同时又懒得添加后台接口，搜索了下，找到一个excellentexport库，它的文档里写到可以这样使用它：

<table id="datatable">
    <tr>
        <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
        <td>400</td> <td>500</td> <td>600</td>
    </tr>
</table>

<a download="somedata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export to Excel</a>
<a download="somedata.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a>

但在ReactJS里要用它还是有点技巧的，最后示例代码如下：

const antd = window.antd;
const {Table} = antd;
const ExcellentExport = window.ExcellentExport;
const $ = window.$;

class Demo extends React.Component{
    exportExcel(anchor, refName, sheetName){
        let tableEl = $('.ant-table-body > table', ReactDOM.findDOMNode(this.refs[refName]));
        if(tableEl.length > 0){
            ExcellentExport.excel(anchor, tableEl[0], sheetName);
        }
    }
    render(){
        return (
        <div>
            <a download="Demo表格.xls" href="#" onClick={(e) => {this.exportExcel(e.target, 'demoTable', 'Demo页');}}>导出Excel文件</a>
            <Table ref="demoTable" .../>
        </div>
        )
    }
}

文章目录

使用echarts图表组件

将页面中的Table导出为Excel