通过 React App 的数据表按钮

IT技术 reactjs datatables
2021-05-03 07:11:51

在 React 中工作时，我一直在尝试添加 excel 导出按钮时遇到问题。我认为它与导入有关，但在这方面我找不到与 React 和 DataTables.net 相关的在线帮助。我只希望用户能够下载到 excel。

这些是我与 jquery 和数据表相关的导入

const $ = require('jquery');
$.DataTable = require('datatables.net');
import 'datatables.net-dt/css/jquery.dataTables.css'

这里是定义表的地方。除了按钮之外它都可以工作

componentDidMount() {
    this.$el = $(this.el);
    this.$el.DataTable({
          dom: 'Bfrtip',
          data: this.makeArray(),
          columns: this.getColumns(),
          pageLength:this.props.json.length,
          buttons: [
                {
                    extend: 'excel',
                    text: 'Save current page',
                    fileName:  "data.xlsx",
                    exportOptions: {
                       modifier: {
                            page: 'current'
                           }
                    }
                 }]});
}

这是渲染方法

render() {
    return (
        <div>
            <table className="display" width="100%" ref={el=>this.el=el} />
        </div>);
}

任何帮助表示赞赏

2个回答

回答了我自己的问题

需要安装jzip，需要它然后将它附加到窗口对象

const jzip = require( 'jzip');
window.JSZip = jzip;

我也将按钮切换到 excelhtml5。这是我拥有的所有 jquery/datatable 导入

const $ = require('jquery');
$.DataTable = require('datatables.net');
import 'datatables.net-dt/css/jquery.dataTables.css'
require( 'datatables.net-buttons/js/dataTables.buttons.min' );
const jzip = require( 'jzip');
require( 'datatables.net-buttons/js/buttons.html5.min' );
import 'datatables.net-buttons-dt/css/buttons.dataTables.css'

window.JSZip = jzip;

这是 componentDidMount 方法的更新按钮部分。

componentDidMount() {
    this.$el = $(this.el);
    this.$el.DataTable({
        dom: 'Bfrtip',
            data: this.makeArray(),
            columns: this.getColumns(),
                paging:false,
    buttons: [
        'excelHtml5'
    ]
        }
    );
}

按照 bvmcode 的答案，我已经能够解决问题，但是我只使用导入而不是使用要求。要了解要安装的导入和组件：https : //datatables.net/download/

我的进口：

import * as jzip from 'jszip';
import 'pdfmake';
import 'datatables.net-dt';
import 'datatables.net-buttons-dt';
import 'datatables.net-buttons/js/buttons.html5.js';
import 'datatables.net-fixedheader-dt';
import 'datatables.net-rowgroup-dt';
window.JSZip = jzip;
其它你可能感兴趣的问题
上一篇未定义不是对象（评估 StatusBarManager.HEIGHT） react-native 0.55.4 下一篇ReactJS 文件夹结构