Reactjs 通过React应用程序的Datatables按钮
在React中工作时,我在尝试添加excel导出按钮时遇到问题。我认为这与导入有关,但我在网上找不到与React和DataTables.net相关的帮助。我只希望用户能够下载到excel 这些是我与jquery和datatables相关的导入Reactjs 通过React应用程序的Datatables按钮,reactjs,datatables,Reactjs,Datatables,在React中工作时,我在尝试添加excel导出按钮时遇到问题。我认为这与导入有关,但我在网上找不到与React和DataTables.net相关的帮助。我只希望用户能够下载到excel 这些是我与jquery和datatables相关的导入 const $ = require('jquery'); $.DataTable = require('datatables.net'); import 'datatables.net-dt/css/jquery.dataTables.css' 这里是定
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>);
}
render(){
返回(
this.el=el}/>
);
}
感谢您的帮助回答了我自己的问题 需要安装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的回答,我已经能够解决这个问题,但是我只使用导入,而不是使用requires。要了解要安装的导入和组件,请执行以下操作: 我的进口:
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;