首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >记录解决几个前端小问题的过程

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

作者头像
jeremyxu
发布2018-05-10 18:01:06
2.2K0
发布2018-05-10 18:01:06
举报

今天的主要工作都在用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, 找了下echartsreactjs包装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>
        )
    }
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-02-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用echarts图表组件
  • 将页面中的Table导出为Excel
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档