如何解决如何在react js
我是反应 js 的新手，也是创建 jspdf pdf 的新手。我正在创建一个 pdf 以供下载，但是我在 pdf 顶部出现了空白，如下所示：
我想删除我在 pdf 中得到的这个空白区域。我的 html 呈现如下：
这是生成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");
}
});
};
这里是下载数据的函数：
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
});
});
});
};
这是相同的html：
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>
);
}
}
为什么我会在顶部出现这个空白区域以及如何删除它。请帮忙
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
