如何解决如何在页面底部设置pdf页脚
这是我的 quotationDetail.js 文件，我在 printPdf 函数中创建了 pdf。问题是我想在 footer 处设置 buttom，为此我已将页脚位置设置为绝对 left 0,right 0,buttom 0。但页脚转到页面的中心我的数据在表格行中是动态的，所以我不能给 margin 顶部。我该怎么做？
这是我的截图，页脚在页面中间
import React,{ Component } from "react";
import { connect } from "react-redux";
import { Button } from "react-bootstrap";
import rootAction from "../../redux/actions/index";
import { moment } from "moment";
import * as html2canvas from "html2canvas";
import jsPDF from "jspdf";
import { Font } from "@react-pdf/renderer";
import { FaPrint } from "@react-icons/all-files/fa/FaPrint";
class QuotationDetail extends Component {
constructor(props) {
super(props);
console.log(props);
this.state = {
authUser: this.props.authUserProp,// customers: this.props.history.location.state.customers,// products: this.props.history.location.state.products,// phones: this.props.history.location.state.products,// discount: this.props.history.location.state.discount,// value: this.props.history.location.state.value,customer_detail: [],contact_name: "",company_name: "",address: "",city: "",country_id: "",contact_email: "",contact_number: "",company_number: "",company_email: "",// date: this.props.history.location.state.minDate,salutation: "",data: [],quotationData: "",products: [],customerData: "",displayButton: true,headers: true,quotDate: "",//products=this.props.products
};
}
printPdf = () => {
setTimeout(() => {
console.log("i print function");
const input = document.getElementById("divToPrint");
html2canvas(input).then((canvas) => {
// console.log("i print function");
var imgWidth = 210;
var pageHeight = 290;
var imgHeight = (canvas.height * imgWidth) / canvas.width;
var heightLeft = imgHeight;
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF("p","mm","a4");
var position = 0;
var heightLeft = imgHeight;
pdf.addImage(imgData,"JPEG",position,imgWidth,imgHeight);
pdf.save("download.pdf");
});
},1000);
};
getQuotationData = () => {
axios
.get("/api/quotation/details",{
params: {
api_token: this.state.authUser.api_token,// id: this.state.coustomerid
},})
.then((response) => {
// console.log(response.data);
this.setState({
quotationData: response.data.message,customerData: response.data.customer,quotDate:response.data.quotDate,});
// date = moment(response.data.message.created_at).format('DD MMM,YYYY')
});
};
componentDidMount() {
// console.log(this.state.customers.value)
// const windowUrl = this.props.location.pathname;
// const pathnamteString = windowUrl.split('/');
// this.state.customers= pathnamteString[pathnamteString.length - 1];
console.log(this.props);
axios
.get("/api/v1/customers/detail",{
params: {
// id: this.state.customers.value
}
})
.then(response => {
// this.state.data=this.state.phones.map((item,i)=>{
// (item.base_price*item.quantity)-(item.quantity*item.base_price)*(item.discount/100)
// })
this.setState({
customer_detail: response.data.message,contact_name: response.data.message[0].contact_name,company_name: response.data.message[0].company_name,address: response.data.message[0].address,city: response.data.message[0].city_id,country_id: response.data.message[0].country_id,postal_code: response.data.message[0].postal_code,contact_email: response.data.message[0].contact_email,contact_number: response.data.message[0].contact_number,company_number: response.data.message[0].company_number,company_email: response.data.message[0].company_email,salutation: response.data.message[0].salutation,});
});
this.getQuotationData();
}
render() {
var count = 0;
for (var i = 0; i < this.state.data.length; i++) {
count = count + this.state.data[i];
}
const pdfHeader = {
padding: "10px",borderBottom: "1px solid",borderColor: "#8e8f99",};
const quotInfo = {
padding: "10px",width: "100%",};
const InfoText = {
fontSize: "18px",margin: "0px",};
const tableColumn = {
float: "right",};
const footer = {
marginTop: "30%",padding: "10px",paddingBottom: "15px",borderTop: "1px solid",position: "absolute",left: "0px",bottom: "0px",right: "0px",};
const printIcon = {
float:"right",fontSize:"30",color:"#333",cursor: "pointer",}
return (
<div
className="container"
style={{ width: "100%",backgroundColor: "#fff" }}
>
<div className="row" style={quotInfo}>
<div className="col-sm-8"></div>
<div className="col-sm-4">
{this.state.displayButton ? (
<FaPrint
// color={"coral"}
// size={30}
onClick={this.printPdf}
// style={{ float: "right" }}
style={printIcon}
/>
) : null}
</div>
</div>
<div id="divToPrint">
<div className="row" style={pdfHeader} id="headers">
<div className="col-sm-12">
<div>
<h1>pdf header image</h1>
</div>
</div>
</div>
<div className="row" style={quotInfo}>
<div className="col-sm-9">
<div>
{" "}
<p style={InfoText}>{this.state.customerData.company_name}</p>
</div>
<div>
{" "}
<p style={InfoText}>
{this.state.customerData.address}
{this.state.customerData.city_id}
{this.state.customerData.country_id}{" "}
</p>
</div>
<div>
{" "}
<p style={InfoText}>{this.state.customerData.company_fax}</p>
</div>
<div>
{" "}
<p style={InfoText}>{this.state.customerData.company_email}</p>
</div>
<div>
{" "}
<p style={InfoText}>{this.state.customerData.company_number}</p>
</div>
</div>
<div className="col-sm-3">
<div>
{" "}
<p
style={{
...InfoText,...{ fontWeight: "bold" },}}
>
<span>Quote Date</span> <span>تاريخ الاقتباس</span>
</p>
</div>
<div>
{" "}
<p style={InfoText}>{this.state.quotDate}</p>
</div>
<div>
{" "}
<p
style={{
...InfoText,}}
>
<span>Quote Number</span> <span>رقم الإقتباس</span>
</p>
</div>
<div>
{" "}
<p style={InfoText}>{this.state.quotationData.quot_no}</p>
</div>
<div>
{" "}
<p
style={{
...InfoText,}}
>
<span>Reference</span> <span>مرجع</span>
</p>
</div>
<div>
{" "}
<p style={InfoText}>{this.state.quotationData.po_reference}</p>
</div>
</div>
</div>
<div className="row" style={quotInfo}>
<div className="col-md-12 col-lg-12 col-sm-12">
<table class="table table-responsive table-bordered w-100">
<thead>
<tr>
<th
scope="col"
style={{
backgroundColor: "#b6c0c6",}}
>
SNO.
</th>
<th
scope="col"
style={{
textAlign: "center",backgroundColor: "#b6c0c6",}}
>
Product/Service<br></br> المنتج / الخدمة
</th>
<th
scope="col"
style={{
textAlign: "center",}}
>
Quantity <br></br> كمية
</th>
<th
scope="col"
style={{
textAlign: "center",}}
>
Unit Price<br></br> قائمة الأسعار
</th>
<th
scope="col"
style={{
textAlign: "center",}}
>
Sale Price<br></br> سعر البيع
</th>
<th
scope="col"
style={{
textAlign: "center",}}
>
Discount<br></br> خصم
</th>
<th
scope="col"
style={{
textAlign: "center",}}
>
VAT<br></br> ضريبة القيمة المضافة
</th>
<th
scope="col"
style={{
textAlign: "center",}}
>
Total<br></br> مجموع
</th>
</tr>
</thead>
{this.state.quotationData.lineproducts ? (
<tbody>
{this.state.quotationData.lineproducts.map(
(product,idx) => {
var tempprice =
(product.sale_price - product.discount) *
product.quantity;
var tempTotal =
tempprice + parseInt(product.product_vat);
return (
<>
<tr>
<th scope="row">{product.id}</th>
<td>
{product.product_name}
</td>
<td>{product.quantity}</td>
<td>{product.unit_price}</td>
<td>{product.sale_price}</td>
<td>{product.discount}</td>
<td>{product.product_vat}</td>
<td>{tempTotal}</td>
</tr>
</>
);
}
)}
;
</tbody>
) : null}
</table>
</div>
<div className="col-sm-12">
<table
class="table table-responsive table-bordered"
id="quottable"
>
<tbody className={"tableBody"}>
<tr id="tableRow">
<td className={"tableColumn"}>
{this.state.quotationData.total_amount} SAR
</td>
<td className={"tableColumn"}>Total</td>
</tr>
</tbody>
</table>
</div>
<div className="col-sm-12">
<table
class="table table-responsive table-bordered"
id="quottable"
>
<tbody className={"tableBody"}>
<tr id="tableRow">
<td className={"tableColumn"}>
{this.state.quotationData.total_discount} SAR
</td>
<td className={"tableColumn"}>Discount</td>
</tr>
</tbody>
</table>
</div>
<div className="col-sm-12">
<table
class="table table-responsive table-bordered"
id="quottable"
>
<tbody className={"tableBody"}>
<tr id="tableRow">
<td className={"tableColumn"}>
{this.state.quotationData.total_amount -
this.state.quotationData.total_discount}{" "}
SAR
</td>
<td className={"tableColumn"}>Subtotal</td>
</tr>
</tbody>
</table>
</div>
<div className="col-sm-12">
<table
class="table table-responsive table-bordered"
id="quottable"
>
<tbody className={"tableBody"}>
<tr id="tableRow">
<td className={"tableColumn"}>
{this.state.quotationData.total_vat} SAR
</td>
<td className={"tableColumn"}>Vat</td>
</tr>
</tbody>
</table>
</div>
<div className="col-sm-12">
<table
class="table table-responsive table-bordered"
id="quottable"
>
<tbody className={"tableBody"}>
<tr id="tableRow">
<td className={"tableColumn"}>
{this.state.quotationData.grand_total} SAR
</td>
<td className={"tableColumn"}>Grand Total</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="row" style={quotInfo}>
<div className="col-sm-12">
<div>
{" "}
<p
style={{
...InfoText,...{ marginBottom: "10px" },}}
>
Hope you find our quotation reasonable and we look forward to
receive your valued purchase order soon.
</p>
</div>
</div>
<div className="col-sm-12">
<div>
{" "}
<p style={InfoText}>Refer to Company Terms and Conditions.</p>
</div>
</div>
<div className="col-sm-12">
<div>
<p
style={{
...InfoText,...{
marginTop: "10px",fontWeight: "bold",},}}
>
Notes:20-09-032145 PCOC
</p>
</div>
</div>
</div>
<div className="row" style={quotInfo}>
<div className="col-sm-6">
<div>
<p
style={{
...InfoText,}}
>
Bank Details
</p>
</div>
<div>
{" "}
<p style={InfoText}>Saudi Fransi Bank</p>
</div>
<div>
{" "}
<p style={InfoText}>IBAN: 789577854225222</p>
</div>
<div>
{" "}
<p style={InfoText}>ACCOUNT NO: 562346535</p>
</div>
<div>
{" "}
<p style={InfoText}>SWIFT:BSFRSARI</p>
</div>
</div>
</div>
<div className="row" style={quotInfo}>
<div className="col-sm-9">
<div>
{" "}
<p style={InfoText}>For Customer Approval Only</p>
</div>
<div>
{" "}
<p style={InfoText}>Name: </p>
</div>
<div>
{" "}
<p style={InfoText}>Position:</p>
</div>
<div>
{" "}
<p style={InfoText}>Employee #:</p>
</div>
<div>
{" "}
<p style={InfoText}>Signature</p>
</div>
<div>
{" "}
<p style={InfoText}>Company Stamp</p>
</div>
</div>
<div className="col-sm-3">
<div>
{" "}
<p style={InfoText}>Prepared By</p>
</div>
<div>
{" "}
<p style={InfoText}>--------------------------- </p>
</div>
<div>
{" "}
<p style={InfoText}>Hafi Ali</p>
</div>
<div>
{" "}
<p style={InfoText}>Department:</p>
</div>
<div>
{" "}
<p style={InfoText}>Mobile: +14785962452</p>
</div>
<div>
{" "}
<p style={InfoText}>Email:hali@qqcms.com</p>
</div>
</div>
</div>
<div className="row" style={footer}>
<div className="col-sm-9">
<div>
{" "}
<p
style={{
...InfoText,...{ fontSize: "16px" },}}
>
Selma Center 1st Floor,ImamAbdullah Bin Saud Road,Ash
Shuhada,Riyadh
</p>
</div>
<div>
{" "}
<p
style={{
...InfoText,...{
fontSize: "16px",marginTop: "-3px",}}
>
P.O. Box 88458 Riyadh 11662{" "}
</p>
</div>
<div>
{" "}
<p
style={{
...InfoText,}}
>
Ph. : +966 784521659
</p>
</div>
<div>
{" "}
<p
style={{
...InfoText,}}
>
Fax : +966 784521659
</p>
</div>
<div>
{" "}
<p
style={{
...InfoText,}}
>
https://www.qqcms.com.sa/
</p>
</div>
</div>
<div className="col-sm-3">
<div>
{" "}
<p
style={{
...InfoText,marginTop: "15%",}}
>
<span>15/01/2021</span>
</p>
</div>
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
authUserProp: state.authUserReducer,activeComponentProp: state.activeComponentReducer,};
};
const mapDispatchToProps = (dispatch) => {
return {
setAuthUserProp: (user) => dispatch(setAuthUser(user)),setActiveComponentProp: (component) =>
dispatch(rootAction.setActiveComponent(component)),};
};
export default connect(mapStateToProps,mapDispatchToProps)(QuotationDetail);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。