how to remove blank space for jspdf pdf in react js - reactjs

Question

I am new to react js and new to creating jspdf pdf. I am creating a pdf for download however I am getting blank space at the top of the pdf like so:
I want to remove this blank space that I am getting in the pdf. My html renders like this:
Here is the function to generate the pdf:
generatePDF = () => {
window.html2canvas = html2canvas;
var doc = new jsPDF("p", "pt", "a4");
doc.html(document.querySelector("#content"), {
callback: function(pdf) {
pdf.save("Coil_Details.pdf");
}
});
};
Here is the function to download data:
getData = async () => {
var ID = this.props.id;
var promise = await this.getAuthorization();
var proxyUrl = "https://cors-anywhere.herokuapp.com/";
console.log("ID:" + ID);
axios({
method: "GET",
url: serverDetails.jwtTokenGenerationURL,
params: {
"jwt-token": jwtService.GetJWT()
}
})
.then(response => {
if (response.statusText != "" && response.statusText != "OK") {
return Promise.reject(response.statusText);
} else {
serverDetails.jwtResponse = response.data;
//return response.data;
}
})
.then(response => {
var url = "api/observation/GetCoilImages";
url += "?jwt=" + serverDetails.jwtResponse;
url += "&ID=" + ID;
axiosAPI
// .get(url)
.get(url)
.then(response => {
if (response.statusText != "" && response.statusText == "OK") {
// window.open(response.data, '_blank');
console.log("Response:" + response.data);
console.log("Response1:" + response.data[0]);
var code = [];
for (var i in response.data) {
code[i] = response.data[i];
console.log("Code:" + code);
}
this.setState({ code });
}
this.setState({
modal: !this.state.modal
});
});
});
};
Here is the html for the same:
return (
<div>
<i
className="fa fa-list-alt"
aria-hidden="true"
// onClick={this.toggle}
onClick={this.getData}
></i>
<Modal
isOpen={this.state.modal}
toggle={this.toggle}
className={this.props.className}
size="lg"
style={{ maxWidth: "700px", width: "100%" }}
>
<ModalHeader
toggle={this.toggle}
cssModule={{ "modal-title": "w-100 text-center" }}
>
Coil Details
</ModalHeader>
<ModalBody>
{/* <Container fluid={true}>
<Card className="card-profile shadow mt--100">
<CardBody> */}
<div id="content">
<div>
<Card className="card-profile shadow">
<center>
{/* <img src={this.props.url} width="100%" height="250px" /> */}
{/* <img src={code} width="100%" height="250px" /> */}
{/* {this.state.code.map(({ src }) => (
<img src={src} key={src} width="40%" height="50px" />
))} */}
{this.state.code.map((imgSrc, index) => (
<img
src={imgSrc}
key={index}
width="100%"
height="250px"
style={{
border: "5px solid #000000",
margin: "3px 3px 3px 3px"
}}
/>
))}
</center>
</Card>
</div>
<hr></hr>
<br></br>
<Row style={{ marginTop: "1rem", marginLeft: "1rem" }}>
<Col lg="3" style={{ marginTop: "1rem" }}>
<FormGroup>
<label>Type</label>
<Input
type="text"
id="typeTextField"
size="sm"
defaultValue={this.props.type}
/>
</FormGroup>
</Col>
<Col lg="3" style={{ marginTop: "1rem", marginLeft: "3rem" }}>
<FormGroup>
<label>Coil ID</label>
<Input
type="text"
id="coilTextField"
size="sm"
defaultValue={this.props.id}
/>
</FormGroup>
</Col>
<Col lg="3" style={{ marginTop: "1rem", marginLeft: "3rem" }}>
<FormGroup>
<label>View</label>
<Input
type="text"
id="viewTextField"
size="sm"
defaultValue={this.props.view}
/>
</FormGroup>
</Col>
</Row>
<hr></hr>
<Row style={{ marginLeft: "1rem" }}>
<Col lg="3">
<FormGroup>
<label>Delivery No</label>
<Input
type="text"
id="deliveryTextField"
size="sm"
defaultValue={this.props.delivery}
/>
</FormGroup>
</Col>
<Col lg="3" style={{ marginLeft: "3rem" }}>
<FormGroup>
<label>Invoice No</label>
<Input
type="text"
id="invoiceTextField"
size="sm"
defaultValue={this.props.invoice}
/>
</FormGroup>
</Col>
<Col lg="3" style={{ marginLeft: "3rem" }}>
<FormGroup>
<label>Wagon No</label>
<Input
type="text"
id="wagonTextField"
size="sm"
defaultValue={this.props.wagon}
/>
</FormGroup>
</Col>
</Row>
<hr></hr>
<Row style={{ marginLeft: "1rem" }}>
<Col lg="3">
<FormGroup>
<label>Location</label>
<Input
type="text"
id="locationTextField"
size="sm"
defaultValue={this.props.location}
/>
</FormGroup>
</Col>
<Col lg="3" style={{ marginLeft: "3rem" }}>
<FormGroup>
<label>ICHP</label>
<Input
type="text"
id="ICHPTextField"
size="sm"
defaultValue={this.props.ICHP}
/>
</FormGroup>
</Col>
<Col lg="3" style={{ marginLeft: "3rem" }}>
<FormGroup>
<label>Remarks</label>
<Input
type="textarea"
id="remarksTextField"
size="sm"
defaultValue={this.props.remarks}
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col
lg="5"
style={{ display: "flex", justifyContent: "center" }}
>
<FormGroup>
<label>Date</label>
<Input
type="text"
id="dateTextField"
size="sm"
defaultValue={this.props.date}
/>
</FormGroup>
</Col>
</Row>
</div>
{/* </CardBody>
</Card>
</Container> */}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.generatePDF}>
Download
</Button>{" "}
<Button color="secondary" onClick={this.toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
Why am I getting this blank space at the top and how to remove it. Please help