通過React App的Datatables按鈕

Question

我在使用React時嘗試添加excel導出按鈕時遇到問題。 我認為這與導入有關，但是在這方面，我在網上找不到與React和DataTables.net相關的幫助。 我只希望用戶能夠下載到Excel。

這些是我與jquery和datatables相關的導入

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>);
}

任何幫助表示贊賞

Answer 1

回答了我自己的問題

需要安裝jzip，需要它，然后將其附加到window對象

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

我還將按鈕切換為excelhtml5。 這是我所有的jQuery /數據表導入

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'
    ]
        }
    );
}

Answer 2

按照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;