问题描述
我无法导出在我的react文件中创建的表。我尝试使用jsPDF和jspdf-autotable并实现了它,但仍然无法执行。我正在导入json文件,并希望将其导出为pdf。 exportPDF引起一些错误。
我得到的错误是:
*Failed to compile.
Error in ./~/jspdf/dist/jspdf.es.min.js
Module parse Failed: C:\Users\1626808\Desktop\Doc\shivam-git-repo\Sprint-2\Ops-User\react-starter-app-template\node_modules\jspdf\dist\jspdf.es.min.js Unexpected token (206:77)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (206:77)
@ ./src/components/opsCustomers/CustomerList.js 24:13-29*
有人可以帮忙吗? 这是我的代码:
import React,{Component} from 'react'
import CustomersData from './deposits.json'
import CustomerDetails from './CustomerDetails'
import { Card } from 'reactstrap';
import {jsPDF} from "jspdf";
import "jspdf-autotable";
class CustomerList extends Component{
constructor(){
super();
this.state={
customers: CustomersData,selectedCustomer: null
}
this.onCustomerSelect = this.onCustomerSelect.bind(this);
}
exportPDF = () => {
const unit = "pt";
const size = "A4"; // Use A1,A2,A3 or A4
const orientation = "portrait"; // portrait or landscape
const marginLeft = 40;
const doc = new jsPDF(orientation,unit,size);
doc.setFontSize(15);
const title = "List";
const headers = [["ID","Name","Dep ID","Amount","maturity Date"]];
const data = this.state.customers.map(customer=> [customer.cifid,customer.cifname,customer.depositid,customer.depositamount,customer.maturitydate]);
let content = {
startY: 50,head: headers,body: data
};
doc.text(title,marginLeft,40);
doc.autoTable(content);
doc.save("report.pdf")
}
displayData(){
const tabelRows=this.state.customers.map((customer)=>{
return(
<tr onClick={event=>this.onCustomerSelect(event,customer)} key={customer.cifid}>
<td>{customer.cifid}</td>
<td>{customer.cifname}</td>
<td>{customer.depositid}</td>
<td>{customer.depositamount}</td>
<td>{customer.maturitydate}</td>
</tr>
)
});
return tabelRows;
}
onCustomerSelect(event,customer) {
console.log(customer);
this.setState({
selectedCustomer: customer
})
}
render(){
return(
<div className='container'>
<div className='row'>
<div className='col-md-8'>
<Card body outline color="secondary" >
<h3 className="centr">Customer List</h3>
<hr/>
<table className="table table-hover table-bordered table-sm table-striped">
<thead className="tgrad">
<tr>
<th>CIF-ID</th>
<th>CIF Name</th>
<th>Deposit-ID</th>
<th>Deposit Amount</th>
<th>maturity Date</th>
</tr>
</thead>
<tbody>
{this.displayData()}
</tbody>
</table>
</Card>
</div>
<div className='col-md-4'>
{
this.state.selectedCustomer ? <CustomerDetails customer={this.state.selectedCustomer}/> : null
}
</div>
</div>
<div>
<button onClick={() => this.exportPDF()}>Generate Report</button>
</div>
</div>
);
}
}
export default CustomerList
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)