将表从React导出到PDF

如何解决将表从React导出到PDF

我无法导出在我的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