通过React App的Datatables按钮 [英] Datatables button through React App
问题描述
在React中工作时,尝试添加excel导出按钮时遇到了问题。我认为这与导入有关,但是在这方面,我在网上找不到与React和DataTables.net相关的帮助。我只是希望用户能够下载到excel。
I've been having issues trying to add an excel export button when working in React. I assume it has something to do with an import but I can't find much help online related to React and DataTables.net in this regard. I just want a user to be able to download to excel.
这些是我与jquery和数据表相关的导入
these are my imports related to jquery and datatables
const $ = require('jquery');
$.DataTable = require('datatables.net');
import 'datatables.net-dt/css/jquery.dataTables.css'
此处是定义表的位置。除按钮以外,其他功能均有效。
here is where the table is defined. It works except for the buttons
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>);
}
不胜感激
推荐答案
回答了我自己的问题
需要安装jzip,需要它,然后将其附加到窗口对象
needed to do install jzip, require it and then attach it to the window object
const jzip = require( 'jzip');
window.JSZip = jzip;
我也将按钮切换为excelhtml5。这是我所有的jquery /数据表导入
I also switched the button to excelhtml5. Here are all the jquery/datatable imports I have
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方法的更新按钮部分。
here is the updated buttons portion of the componentDidMount method.
componentDidMount() {
this.$el = $(this.el);
this.$el.DataTable({
dom: 'Bfrtip',
data: this.makeArray(),
columns: this.getColumns(),
paging:false,
buttons: [
'excelHtml5'
]
}
);
}
这篇关于通过React App的Datatables按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!