嗨，大家好我正在研究项目，我想使用这个表 http://www.material-ui.com/#/components/table 在修复所有内容并使其与我的项目一起工作后我遇到了这个问题 我想要的是将前端选择的信息发送到后端，这样我就可以下载选中的信息， 有没有简单的方法呢？ 谢谢你的帮助:) 这是代码
import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import Auth from '../modules/Auth';
import Dashboard from '../components/Dashboard.jsx';
import {
Table,
TableBody,
TableFooter,
TableHeader,
TableHeaderColumn,
TableRow,
TableRowColumn,
} from 'material-ui/Table';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import Toggle from 'material-ui/Toggle';
const styles = {
propContainer: {
width: 200,
overflow: 'hidden',
margin: '20px auto 0',
},
propToggleHeader: {
margin: '20px auto 10px',
},
};
class DashboardPage extends React.Component {
/**
* Class constructor.
*/
constructor(props) {
super(props);
this.state = {
fixedHeader: true,
fixedFooter: false,
stripedRows: false,
showRowHover: false,
selectable: true,
multiSelectable: true,
enableSelectAll: true,
deselectOnClickaway: true,
showCheckboxes: true,
height: '300px',
tableData: []
};
this.handleToggle = this.handleToggle.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleToggle (event, toggled){
this.setState({
[event.target.name]: toggled
});
};
handleChange(event){
this.setState({height: event.target.value});
};
componentDidMount() {
const xhr = new XMLHttpRequest();
xhr.open('get', '/api/getdata');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// set the authorization HTTP header
xhr.setRequestHeader('Authorization', `bearer ${Auth.getToken()}`);
xhr.responseType = 'json';
xhr.addEventListener('load', () => {
if (xhr.status === 200) {
this.setState({tableData: xhr.response});
}
});
xhr.send();
};
handleClick() {
let anchor = document.createElement("a");
let file = 'http://localhost:3000/api/export';
let headers = new Headers();
headers.append('Authorization', `bearer ${Auth.getToken()}`);
fetch(file, { headers })
.then(response => response.blob())
.then(blobby => {
let objectUrl = window.URL.createObjectURL(blobby);
anchor.href = objectUrl;
anchor.download = 'some-file.xlsx';
anchor.click();
window.URL.revokeObjectURL(objectUrl);
});
};
/**
* Render the component.
*/
render() {
return (
<div>
<Table
height={this.state.height}
fixedHeader={this.state.fixedHeader}
fixedFooter={this.state.fixedFooter}
selectable={this.state.selectable}
multiSelectable={this.state.multiSelectable}
>
<TableHeader
displaySelectAll={this.state.showCheckboxes}
adjustForCheckbox={this.state.showCheckboxes}
enableSelectAll={this.state.enableSelectAll}
>
<TableRow>
<TableHeaderColumn colSpan="7" tooltip="Super Header" style={{textAlign: 'center'}}>
Super Header
</TableHeaderColumn>
</TableRow>
<TableRow>
<TableHeaderColumn tooltip="ID">ID</TableHeaderColumn>
<TableHeaderColumn tooltip="Name">Name</TableHeaderColumn>
<TableHeaderColumn tooltip="Event">Event</TableHeaderColumn>
<TableHeaderColumn tooltip="Email">Email</TableHeaderColumn>
<TableHeaderColumn tooltip="Iban">Iban</TableHeaderColumn>
<TableHeaderColumn tooltip="UID">UID</TableHeaderColumn>
<TableHeaderColumn tooltip="Date">date</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody
displayRowCheckbox={this.state.showCheckboxes}
deselectOnClickaway={this.state.deselectOnClickaway}
showRowHover={this.state.showRowHover}
stripedRows={this.state.stripedRows}
>
{this.state.tableData.map((row, index) => (
<TableRow key={index}>
<TableRowColumn>{index}</TableRowColumn>
<TableRowColumn>{row.name}</TableRowColumn>
<TableRowColumn>{row.event}</TableRowColumn>
<TableRowColumn>{row.email}</TableRowColumn>
<TableRowColumn>{row.iban}</TableRowColumn>
<TableRowColumn>{row.uid}</TableRowColumn>
<TableRowColumn>{row.date}</TableRowColumn>
</TableRow>
))}
</TableBody>
<TableFooter
adjustForCheckbox={this.state.showCheckboxes}
>
<TableRow>
<TableRowColumn>ID</TableRowColumn>
<TableRowColumn>Name</TableRowColumn>
<TableRowColumn>Event</TableRowColumn>
<TableRowColumn>Email</TableRowColumn>
<TableRowColumn>Iban</TableRowColumn>
<TableRowColumn>UID</TableRowColumn>
<TableRowColumn>date</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn colSpan="7" style={{textAlign: 'center'}}>
Super Footer
</TableRowColumn>
</TableRow>
</TableFooter>
</Table>
<br/>
<div>
<RaisedButton label="Download" fullWidth={true} onClick={this.handleClick} />
</div>
<div style={styles.propContainer}>
<h3>Table Properties </h3>
<TextField
floatingLabelText="Table Body Height"
defaultValue={this.state.height}
onChange={this.handleChange}
/>
<Toggle
name="fixedHeader"
label="Fixed Header"
onToggle={this.handleToggle}
defaultToggled={this.state.fixedHeader}
/>
<Toggle
name="fixedFooter"
label="Fixed Footer"
onToggle={this.handleToggle}
defaultToggled={this.state.fixedFooter}
/>
<Toggle
name="selectable"
label="Selectable"
onToggle={this.handleToggle}
defaultToggled={this.state.selectable}
/>
<Toggle
name="multiSelectable"
label="Multi-Selectable"
onToggle={this.handleToggle}
defaultToggled={this.state.multiSelectable}
/>
<Toggle
name="enableSelectAll"
label="Enable Select All"
onToggle={this.handleToggle}
defaultToggled={this.state.enableSelectAll}
/>
<h3 style={styles.propToggleHeader}>TableBody Properties</h3>
<Toggle
name="deselectOnClickaway"
label="Deselect On Clickaway"
onToggle={this.handleToggle}
defaultToggled={this.state.deselectOnClickaway}
/>
<Toggle
name="stripedRows"
label="Stripe Rows"
onToggle={this.handleToggle}
defaultToggled={this.state.stripedRows}
/>
<Toggle
name="showRowHover"
label="Show Row Hover"
onToggle={this.handleToggle}
defaultToggled={this.state.showRowHover}
/>
<h3 style={styles.propToggleHeader}>Multiple Properties</h3>
<Toggle
name="showCheckboxes"
label="Show Checkboxes"
onToggle={this.handleToggle}
defaultToggled={this.state.showCheckboxes}
/>
</div>
</div>
);
}
}
export default DashboardPage;
这是后端
//***************************Download **************************//
router.get("/export",(req,res) => {
console.log("Uids" ,req.body);
var productId = req.body.productIds;
var productArr = [];
if( typeof productId === "string") {
productId = [productId];
}else{
productArr.push(mongoose.Types.ObjectId(productId));
}
console.log("Uids" ,req.body);
var conf ={};
//conf.stylesXmlFile = "styles.xml";
conf.name = "mysheet";
conf.cols = [{
caption:'name',
type:'string'
},{
caption:'event',
type:'string'
},{
caption:'email',
type:'string'
},{
caption:'iban',
type:'string'
},{
caption:'uid',
type:'string'
},{
caption:'date',
type:'date'
}];
conf.rows = [];
User.find({'_id': { $in: productArr }}, function(err, allUid){
if (err) {
res.send(err);
console.log(productArr);
}
for(var i= 0; i < allUid.length; i++) {
var tempdate = "";
try {
tempdate = new Date(allUid[i].date).toISOString().replace(/T/, ' ').replace(/\..+/, '');
} catch(err) {
console.log("Error: ", err);
}
conf.rows.push([
allUid[i].name,
allUid[i].event,
allUid[i].email,
allUid[i].iban,
allUid[i].uid,
tempdate
]);
}
var result = nodeExcel.execute(conf);
res.setHeader('Content-Type', 'application/vnd.openxmlformats');
res.setHeader("Content-Disposition", "attachment; filename=" + "Report.xlsx");
res.end(result, 'binary');
});
});
module.exports = router;