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

今天的主要工作都在用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>
        )
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏dalaoyang

使用IntelliJ Idea新建SpringBoot项目

简单给大家介绍一下我来创建SpringBoot项目使用的工具,本人使用IntelliJ Idea来创建项目,利用其中的Spring Initializr工具来快...

389120
来自专栏自动化测试实战

获取响应头与发送头

49060
来自专栏JadePeng的技术博客

weex官方demo weex-hackernews代码解读(上)

一、介绍 weex 是阿里出品的一个类似RN的框架,可以使用前端技术来开发移动应用,实现一份代码支持H5,IOS和Android。最新版本的weex已默认将v...

35950
来自专栏玩转JavaEE

MongoDB副本集配置

上篇文章我们搭建了MongoDB副本集的环境,验证了数据已经可以成功的复制,本文我们就来看看MongoDB副本集的其他操作。 ---- 环境准备 三台服务器,地...

36150
来自专栏云计算教程系列

如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

邮政地址通常很长,有时很难记住。在许多情况下,需要较短的地址。例如,能够发送仅由几个字符组成的短地址可以确保更快地提供紧急救护车服务。Pieter Geelen...

16620
来自专栏about云

spark2 sql读取json文件的格式要求

问题导读 1.spark2 sql如何读取json文件? 2.spark2读取json格式文件有什么要求? 3.spark2是如何处理对于带有表名信息的jso...

49070
来自专栏ml

C/C++-----------http协议发送字段,文件,单个和多张图片

           关于c/c++ 网络编程,无论在linux还是windows,要说到自由性,和安全性,socket无疑是比较好的!对于socket,因为它...

1.6K80
来自专栏BeJavaGod

【老话新说】在springmvc中使用hibernate-validate

老鸟绕道,新手可以看看,目前流行的SSM中都是使用的hibernate-validate进行验证,可以通过页面标签error显示 或者以json方式(推荐),作...

27470
来自专栏互联网杂技

前端知识普及之页面加载

如果大家想继续看下面的内容的话,有一个要求,就是回答我一个问题: 你这样写过代码吗? window.onload = function(){ $(".g...

38190
来自专栏技术博客

ExtJs九(ExtJs Mvc用户管理之一)

首先要做的是为用户信息创建一个模型,在Scripts\app\model目录下创建一个名为User.js的文件,然后添加以下模型定义代码:

12720

扫码关注云+社区

领取腾讯云代金券