[英]Datatables button through React App
我在使用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>);
}
任何帮助表示赞赏
回答了我自己的问题
需要安装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'
]
}
);
}
按照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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.