如何解决我如何从他们填写的报告表单中获取用户选择的值生成的对象并让我的报告 PDF 反映这些值？
这是用户填写的表单：
这里是报表的代码：
export default class ReportsFormContainer extends Component {
state = {
amount: 0,beginningDate: moment(),endDate: moment(),reportTimeframe: null,transactions: [],};
populateEndingDate = () => {
let endDate = null;
if (this.state.reportTimeframe === "monthly") {
console.log("first if comparison");
endDate = moment(this.state.beginningDate).add(1,"months");
} else {
endDate = moment(this.state.beginningDate).add(1,"years");
}
console.log(endDate);
this.setState({ endDate });
return endDate;
};
handleBeginningDateChange = (event) => {
this.setState({ beginningDate: event.target.value },() =>
this.populateEndingDate()
);
};
handleReportTimeframeChange = (event) => {
this.setState({ reportTimeframe: event.target.value },() =>
this.populateEndingDate()
);
};
handleFormReset = () => {
this.form.reset();
};
handleFormSubmit = (event) => {
event.preventDefault();
//event.target.reset(); will reset the form upon submitting,but
it wipes out most of the data within the object
console.log("Submitting The Form...");
// let username = AuthenticationService.getLoggedInUsername();
// var transactions = fetch(
// `http://localhost:8080/jpa/users/${username}/transactions`
// )
// .then((response) => response.json())
// .then((data) => console.log(data));
const formData = FormSerialize(event.target,{ hash: true });
console.log("Form Contents",{ formData });
};
render() {
return (
<>
<form
onSubmit={this.handleFormSubmit}
onReset={this.handleFormReset}
className="container-fluid p-5 my-3 border bg-dark text-
white"
style={{
textAlign: "left",fontSize: "22px",margin: "275px",height: "2025px",width: "875px",}}
>
<center>
<h1>Report Options</h1>
</center>
<div
style={{
width: "40%",float: "left",padding: "20px 10px",}}
>
<ReportTimeframe onChange=
{this.handleReportTimeframeChange} />
{/* is it because of 'controlid' that the begDate field
is mandatory prior to reset form? */}
<Form.Group controlid="begDate">
<Form.Label>Beginning</Form.Label>
<Form.Control
type="date"
name="begDate"
required
onChange={this.handleBeginningDateChange}
/>
<Form.Label>Ending</Form.Label>
<Form.Control
type="date"
name="endDate"
disabled
value={this.state.endDate.format("YYYY-MM-DD")}
/>
</Form.Group>{" "}
<CarCheckBox />
<FamilyCheckBox />
<Misc style={{ position: "center" }} />
</div>
<div
style={{
width: "40%",float: "right",}}
>
<ReportType />
<AccountCheckBox />
<AccountRelated />
<HomeCheckBox />
<UtilitiesCheckBox />
{/* Submit the form */}
<ButtonTwo
type="submit"
theme={"primary"}
title={"run report"}
/>{" "}
{/* Clear the form */}
<Button
className="btn btn-warning"
type="reset"
theme={"secondary"}
title={"reset form"}
style={{
margin: "10px 10px 10px 10px",backgroundColor: "#ffce42",color: "black",}}
/>{" "}
</div>
</form>
</>
);
}
}
这是根据用户的选择创建的对象：
const generatePDF = (transactions) => {
const doc = new jsPDF();
const rows = [];
var total = transactions.reduce((sum,el) => sum + el.transactionAmount,0);
var totalAmount = [...rows.map(el => [el.transactionAmount]),[{content: `Total = $ ${total} `,colSpan: 3,styles: { fillColor: [239,154,154],halign: "right" }
}]]
transactions.forEach((transaction) => {
const carData = [
format(new Date(transaction.transactionDate),"MMM-dd-yyyy"),transaction.withdrawalCategory,"$ " + transaction.transactionAmount
];
rows.push(carData);
});
doc.autoTable({
theme: "grid",startY: 35,head: [
[
{
content: "CAR",styles: { halign: "center",fillColor: [22,160,133] },},],[
"Transaction Date","Category","Amount",body: rows,foot: totalAmount,});
doc.addPage()
doc.autoTable({
theme: "grid",head: [
[
{
content: "FAMILY",});
const pageCount = doc.internal.getNumberOfPages();
for(var i = 1; i <= pageCount; i++) {
doc.setPage(i);
doc.text('Page ' + String(i) + ' of ' + String(pageCount),210-20,297-30,null,"right");
}
doc.save("report.pdf");
};
这是我点击按钮的代码：
const ButtonTwo = (props) => {
const [transactions,setTransactions] = useState([]);
useEffect(() => {
const getAllTransactions = async () => {
try {
let username = AuthenticationService.getLoggedInUsername();
const response = await axios.get(
`http://localhost:8080/jpa/users/${username}/transactions`
);
console.log({ response });
setTransactions(response.data);
} catch (err) {
console.log("error");
}
};
getAllTransactions();
},[]);
const carCategories = [
"car insurance","car maintenance","car parts","car payment","car repairs","car washes","gasoline","personal property taxes",];
const familyCategories = [
"Cathy","Erin & Dulaney","Janice","Jennie","Jessica","Me","Randy","student loans",];
const miscCategories = [
"church donations","entertainment","groceries","medical bills","miscellaneous","vacations",];
const accountsCategories = ["Ally","BOA","Cash","RCU","VCU"];
const homeCategories = [
"home owners insurance","home maintenance","home repairs","mortgage","pest control","property taxes","remodeling",];
const utilitiesCategories = [
"cable/internet","electric","garbage","gas bill","water/sewer",];
const carTransactions = transactions.filter((transaction) =>
carCategories.includes(transaction.withdrawalCategory)
);
const familyTransactions = transactions.filter((transaction) =>
familyCategories.includes(transaction.withdrawalCategory)
);
const miscTransactions = transactions.filter((transaction) =>
miscCategories.includes(transaction.withdrawalCategory)
);
const homeTransactions = transactions.filter((transaction) =>
homeCategories.includes(transaction.withdrawalCategory)
);
const utilitesTransactions = transactions.filter((transaction) =>
utilitiesCategories.includes(transaction.withdrawalCategory)
);
const reportAccountInterestEarned = transactions.filter(
(transaction) => transaction.depositCategory === "interest
earned"
);
const reportAccountRewards = transactions.filter(
(transaction) => transaction.depositCategory === "rewards"
);
const reportAccountBankFees = transactions.filter(
(transaction) => transaction.withdrawalCategory === "bank fees"
);
const accountRelated = [
...reportAccountInterestEarned,...reportAccountRewards,...reportAccountBankFees,];
const accountsTransactions = transactions.filter((transaction) =>
accountsCategories.includes(transaction.depositCategory)
);
const accountsTransactionsTwo = transactions.filter((transaction)
=>
accountsCategories.includes(transaction.withdrawalCategory)
);
return (
<button
style={{
margin: "10px 10px 10px 10px",backgroundColor: "forestgreen",}}
className={
props.type === "primary" ? "btn btn-primary" : "btn btn-
secondary"
}
onClick={() => generatePDF(carTransactions)}
>
{props.title}
</button>
);
};
当然，这是生成的 PDF：
任何建议都会有所帮助，因为我正在为这个问题拉头发。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
