• web是用react写的,然后表格显示使用ant的UI框架Table显示的,现在有这样一个需求, 想要导出这个表格Excel,求各路大神指点一下!谢谢了!
  • React 表格组件导出 Excel 2019-11-27 17:34:23
    以前我们导出表格都是走的后台接口调用,后台处理数据给我们返回Excel文件,这样就会增加后台的工作量,自从知道ReactTable表格组件可以导出excel后,就去研究了一下: GitHub地址:...

    以前我们导出表格都是走的后台接口调用,后台处理数据给我们返回Excel文件,这样就会增加后台的工作量,自从知道React Table表格组件可以导出excel后,就去研究了一下:

    GitHub地址:
    https://github.com/zsusac/ReactHTMLTableToExcel

    安装插件react-html-table-to-excel

    npm install --save react-html-table-to-excel
    国内的由于各种原因可以安装淘宝镜像,用下面方法安装插件
    //cnpm install --save react-html-table-to-excel
    

    安装插件react-dom:

    npm install --save react-dom
    国内的由于各种原因可以安装淘宝镜像,用下面方法安装插件
    //cnpm install --save react-dom

    引入依赖:

    import ReactHTMLTableToExcel from 'react-html-table-to-excel';
    const ReactDOM = require('react-dom');

    React Table组件写法如下:

    //下方Table的Ref<定义在constructor,*React已经不允许用字符串的方法定义组件的ref了>
    constructor(props) {
        super(props);
        this.IversonRef= React.createRef();
    }      
    //Table中有数据后<后台拿到数据后,在拿数据方法的后面定义如下:>
    const tableCon = ReactDOM.findDOMNode(this.IversonRef.current)
    const table = tableCon.querySelector('table');   
    table.setAttribute('id','table-to-xls');
    //组件中写法如下:
    <ReactHTMLTableToExcel
        // id="test-table-xls-button"
        className="download-table-xls-button"
        table="table-to-xls"
        filename="XX统计表"
        sheet="XX统计表"
        buttonText="下载XX统计表"/>
    <Table
        ref={this.IversonRef}
    />

    *特别的,用上面的方法并不能下载完整的Excel,因为React的表格分为antd-table-header和antd-table-body,下载下来的表格要么没有表头要么没有表格的内容Emmmmmmm,这样做显然是不对的

    所以又想到另一个实现方法,思路如下:

    用Html原生的table标签去实现下载功能<让这个table不显示display:'none'>,用React表格组件去实现显示QAQ

    实现代码如下:

    {TableDataList && TableDataList.length>0 ?
           <ReactHTMLTableToExcel
            //className="btnAdd"
            table="TableDataListToXLS"
            filename="XX统计表"
            sheet="XX统计表"
            buttonText="下载XX统计表Excel"/>
    : null}
    <table id="TableDataListToXLS" style={{display:'none'}}>
        <tbody>
           <tr>
              <th>表头01</th>
              <th>表头02</th>
              <th>表头03</th>
            </tr>
          {TableDataList&& TableDataList.length>0 ?
             TableDataList.map(x=>{
               return(
                 <tr key={x.ID}>
                    <td>{x.A}</td>
                    <td>{x.B}</td>
                    <td>{x.C}</td>
                 </tr>
                )
             }) : <tr></tr>}
         </tbody>
    </table>

    其中key={x.ID}是为了给每一行给定一个唯一的标识~~~


    END

    展开全文
  • React 数据导出EXCEL表格 2019-08-05 17:54:31
    yarn add js-export-excel 插件引入 import ExportJsonExcel from 'js-export-excel'; 代码示例 按钮引用 <Button onClick={() => ExportToExcel()}>Export to Excel</Button> 定义函数 const ...
  • 一、由于公司项目需要,需要将表格数据导出EXCEL表格数据。环境React+Ant Design 二、安装插件js-export-excel yarn安装-记得以管理员身份执行 yarn add js-export-excel npm安装 npm install js-export-excel 三...
  • React+Ant Design实现导出excel表格文件显示损坏打不开解决办法 简单描述一下最近实现的一个小小的功能需求,以便后期有用。同时期待与大家一起交流学习。 1,需求:在react项目中,调用后台数据,在table中展示...
  • 因为最近项目又需求要导出excel,所以封装了这部分的功能,对fetch的封装做了修改,使之后的调用导出功能更为方便 首先这个项目请求是对fetch进行过封装的 ,如果对fetch有了解的话,我们知道fetch种response返回的是一...
  • React实现导出excel内容 2020-01-08 16:43:52
    首先这在控制台输入 npm install xlsx安装xls工具。 此时可以看到: “dependencies”:{ “xlsx”: “^0.15.4” } 接着 import XLSX from 'xlsx'; import {message} from 'antd';...input type="file" accept='.xlsx,...
  • react 简单的表格导出 2018-08-27 15:15:04
    react 简单的表格导出 js-export-excel(纯js 支持中文) ES6 module 当页面需要导出简单的excel时,如果需要纯前端实现,可以使用js-export-excel 首先在项目当前目录下安装 npm install js-export-excel ...
  • 我在使用blob导出excel的时候 下载完成的excel文件打不开![图片说明](https://img-ask.csdn.net/upload/201911/05/1572936056_439311.png)![图片说明]...
  • react和fetch导出Excel表格 2020-03-05 13:03:38
    URL.createObjectURL() 静态方法创建一个DOMString,该URL的生命周期和创建它的窗口中document绑定,新的URL对象中有表示是指定的File或者Blob对象 fetch(config.url + "report/download", { headers: { ...
  • react+antd 导出excel 2019-10-11 16:37:01
    本人java程序员一枚,奈何还要天天写前端代码,公司选择的前端框架是react+redux+...如何用react实现导出excel呢? 首先需要构造exportdata: const {fileName,header} = this.props; const exportdata = []; ...
  • react用fetch实现导出Excel 2019-03-29 14:24:22
    // 由前端定义文件名及文件类型 exportByProductNo = (item) => { const reqUrl = `/api/configure/exportConfigure?productKey=${item.productNo}`; fetch(reqUrl).then(resp =>resp.blob()) ...
  • 前记:最近真的挺忙的,一件事接着一件,都忘了我的React项目,尽管这是一个没写概率没写离散的夜晚,我决定还是先做做我的React 好了,进入正题 项目需求,需要导入和导出表单,发现前端已经强大到无所不能(可惜我...
  • 页面导出Excel文件总结 2015-07-28 21:00:35
    页面导出Excel文件总结1 概述:1.1 导出耗时环节1、利用MySQL语句查询行号,作为导出表格的序号2、查询数据按照船代分组,Java代码获取分组数据3、导出Excel文件按照船代分sheet页4、导出设置错行号,导致表格标题...
  • 一、由于公司项目需要,需要将表格数据导出EXCEL表格数据。 环境React+Ant Design 二、安装插件js-export-excel // yarn安装-记得以管理员身份执行 yarn add js-export-excel // npm安装 npm install ...
  • React 表格导出 2019-01-12 12:45:47
    如下方法可以用excel表格下载数据 import ExportJsonExcel from "js-export-excel"; // 调用方法 downloadExcel = () =&gt;{ // 数据导入 const {data} = this.props; let data = data; let ...
1 2 3 4 5 ... 20
收藏数 737
精华内容 294