我正在尝试使用angular7中的jspdf生成发票。当我使用html2canvas捕获屏幕截图时，它将裁剪出ID传递给它的div的某些部分。此外，未设置页面的边距。该怎么做？
预期的输出类似于Expected Image 当前输出就像What I currently get
<h4 mat-dialog-title ><button type="button" (click)="onNoClick()" class="close" data-dismiss="modal" aria-label="Close"><span
>x</span></button></h4>
<div> <div paperSize="A4" margin="4cm" id="print" style="margin: 10%" class="pdf-export">
<div style="width:100%; padding-left: 2%;padding-top: 2%;padding-right: 2%; font-size: small ">
<div style="text-align: center;background: #e9e3e3;text-decoration-color: white;">INVOICE</div>
<div style="display: flow-root;">
<div style="float:left; display: inline;">
<h6>Invoice To:</h6>
<p>{{customer? customer.first_name: "" + " " + customer? customer.last_name:""}}</p>
<p>{{customer? customer.address:""}}</p>
<p>{{customer? customer.city: ""}}</p>
<p>{{customer? customer.postcode: ""}}</p>
<p>{{customer? customer.phone: ""}}</p>
</div>
<div style="float:right; display: inline">
<h6>{{store.store_name}}:</h6>
<p>{{store.address}}</p>
<p>{{store.city}}</p>
<p>{{store.postcode}}</p>
<p>{{store.phone}}</p>
<p>VAT number: 754 451 526</p>
</div>
</div>
<div class="datefield" style="display: flow-root;">
<div style="float:right">
<div style="text-align:right">
<div style="text-align:justify">
<span ><b>Date: </b></span>
<span style="float:right;">{{datetime | date:'yyyy-MM-dd hh:mm:ss a'}}</span>
</div>
</div>
<div style="text-align:right">
<div style="text-align:justify">
<span ><b>Invoice number:</b></span>
<span style="float:right;">{{transaction_id}}</span>
</div>
</div>
</div>
</div>
<div style="display: flow-root;">
<table style="width: 100%;">
<tr style="text-align:left">
<th>Sold by</th>
<th>Customer Ref</th>
<th>Customer Number</th>
</tr>
<tr>
<td>{{sold_by}}</td>
<td><span contenteditable></span></td>
<td>{{store.store_name.charAt(0)}}{{store.store_name.charAt(1).toUpperCase()}}{{customer.customer_id}}</td>
</tr>
</table>
</div>
<div style="display: flow-root;">
<table style="width: 100%;">
<thead>
<tr style="text-align: left;">
<th>Item Code</th>
<th>Description</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Discount</th>
<th style="text-align: right;">Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of saleProducts">
<td>{{row.product.sku}}</td>
<td>{{row.product.product_name}}</td>
<td><span data-prefix>£</span>{{row.display_price | number : '1.2-2'}}</td>
<td>{{row.quantity}}</td>
<td>{{row.promotion.discount? row.promotion.discount : 0}}%</td>
<td style="text-align: right;"><span data-prefix>£</span>{{row.total| number : '1.2-2'}}</td>
</tr>
</tbody>
</table>
</div>
<div class="total" style="display: flow-root;float:right;width:50%; margin-left:55px">
<div >
<div >
<div style="text-align:justify">
<span ><b>Net Amount:</b></span>
<span style="float:right;"><span data-prefix>£</span>{{(net_total)| number : '1.2-2'}}</span>
</div>
</div>
<div >
<div style="text-align:justify">
<span ><b>VAT Amount:</b></span>
<span style="float:right;"><span data-prefix>£</span>{{(total - net_total)| number : '1.2-2'}}</span>
</div>
</div>
<div >
<div style="text-align:justify">
<span ><b>Gross Amount:</b></span>
<div class="border" style="width:30%; float:right">
<span style="float:right;"><span data-prefix>£</span>{{(total)| number : '1.2-2'}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="total" style="display: flow-root;float:right; width:50%; margin-top:1px">
<div >
<div >
<div style="text-align:justify">
<span ><b>Payment Amount:</b></span>
<span style="float:right;"><span data-prefix>£</span>{{payment| number : '1.2-2'}}</span>
</div>
</div>
<div >
<div style="text-align:justify">
<span><b>Balance:</b></span>
<span style="float:right;">£{{(payment - total )| number : '1.2-2'}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/>
<div class="form-actions">
<button value="Print Invoice" (click)="generatePDF()"
class="btn btn-primary btn-lg " style="margin-right: 5px" >Print invoice</button>
<button (click)="onNoClick()" value="Complete Sale" data-dismiss="modal" aria-label="Close">Close</button>
<!-- <input type="button" name="submitf" value="Complete Sale" (click)="onNoClick()"
class="btn submit_button btn-primary btn-lg " /> -->
</div>
@Component({
selector: 'receipt-dialog',
templateUrl: 'receipt-dialog.html',
styleUrls: ['./dialog.css'],
providers: [DatePipe]
})
export class ReceiptDialog {
saleProducts; transaction_id; customer; total; amount_due; payment_type; store;
payment; myDate = new Date(); myDate1; datetime; net_total; sold_by;
constructor(
private datePipe: DatePipe,
public dialogRef: MatDialogRef<ReceiptDialog>,
@Inject(MAT_DIALOG_DATA) public data) {
console.log(data);
this.saleProducts = data.saleProducts;
this.total = data.total;
this.amount_due = data.amount_due;
this.payment_type = data.paymentType;
this.store = data.store;
this.transaction_id = data.transaction_id;
this.payment = data.payment ? data.payment : 0;
this.myDate1 = this.datePipe.transform(this.myDate, 'yyyy-MM-dd');
this.customer = data.customer;
this.datetime = Date.now();
this.net_total = data.net_total;
this.datePipe.transform(this.datetime, "dddd, mmmm dS, yyyy, h:MM:ss TT");
this.sold_by = data.sold_by;
}
onNoClick(): void {
this.dialogRef.close();
}
print(el) {
// window.print();
let docToPrint = document.body.innerHTML;//getElementsByTagName("kendo-pdf-export");
var content = document.getElementById(el).innerHTML;
document.body.innerHTML = content;
window.print();
document.body.innerHTML = docToPrint;
this.onNoClick();
}
public generatePDF() {
var data = document.getElementById('print');
console.log(data);
html2canvas(data).then(canvas => {
console.log(canvas);
// Few necessary setting options
var imgWidth = 208;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png');
let pdf = new jspdf('l', 'mm', 'a4'); // A4 size page of PDF
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
window.open(pdf.output('bloburl'), '_blank');
pdf.save('Invoice.pdf'); // Generated PDF
});
}
}