Как настроить поля страницы в html2canvas для экспорта в pdf с использованием jspdf при использовании angular7

Question

Я пытаюсь сгенерировать счет, используя jspdf в angular7.Когда я делаю снимок экрана с помощью html2canvas, он обрезает некоторую часть элемента div, чей идентификатор передается ему.Также поля страницы не установлены.Как это сделать?

ожидаемый выходной сигнал равен Ожидаемое изображение текущий выходной сигнал равен Что я в настоящее время получаю

<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  
    });
  }
}