Search code examples
javascriptcssangularjspdfhtml2canvas

html2canvas and jsPDF, css styling rendered incorrectly in pdf

Below is the image of my website

websiteImage

and here's the image of html2canvas and jspdf rendered pdf image

enter image description here

HTML:

    <div class="form-group offset-xl-3 col-xl-3 col-md-6 col-12">
    <input type="text" class="form-control" [class.is-form-invalid]="lotCode.invalid &&  lotCode.touched"
              id="inputLotCode" name="lotCode" [(ngModel)]="list.lotCode" #lotCode="ngModel"
              aria-describedby="lotCodeHelp" autocomplete="new-password" required>
    <label for="inputLotCode" class="form-control-label form-control-placeholder"> Lottery Number</label>
    <small id="lotCodeHelp" class="text-danger" *ngIf="lotCode?.errors?.required && (lotCode.touched|| submitted)">
              Required</small>
     </div>

     <div class="form-group offset-xl-3 col-xl-3 col-md-6 col-12">
     <input type="text" class="form-control" [class.is-form-invalid]="productNumber.invalid &&  productNumber.touched"
              id="inputProductNumber" name="productNumber" [(ngModel)]="list.productNum" #productNumber="ngModel"
              aria-describedby="productNumberHelp" autocomplete="new-password" required>
      <label for="inputProductNumber" class="form-control-label form-control-placeholder"> Production Number</label>
      <small id="productNumberHelp" class="text-danger" *ngIf="productNumber?.errors?.required && (productNumber.touched|| submitted)" Required</small>
  </div>

CSS:

  .form-control-placeholder
   {
  position: absolute;
  top: 0;
  padding: 7px 0 0 0px;
  transition: all 200ms;
  color: #6f6f75;
  font-size: 1.1rem;
  font-family: Calibre, "Helvetica Neue", Helvetica, Arial, sans-serif;
     }

 .form-control:focus+.form-control-placeholder,
 .form-control:valid+.form-control-placeholder {
   font-size: 85%;
  font-family: Calibre, "Helvetica Neue", Helvetica, Arial, sans-serif;
  transform: translate3d(0, -100%, 0);
  color: #6f6f75;
  font-weight: lighter;
    }

TS

captureScreenToPdf(){
this.isExport = true;
const data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas => {
 // Few necessary setting options
const imgWidth = 208;
const pageHeight = 250;
const imgHeight = canvas.height * imgWidth / canvas.width;
const heightLeft = imgHeight;

const contentDataURL = canvas.toDataURL('image/png');
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
const position = 0;
pdf.addImage(contentDataURL, 'PNG', 0,  10, imgWidth, imgHeight);
pdf.save('MYPdf.pdf'); // Generated PDF
});

}

Here I am converting my html to image using html2canvas and then turning it into pdf using jspdf. However, css styling is getting messed up in the process. The placeholder position should be absolute and top 0; which is returned incorrectly in pdf.

Solution

  • I resolved the above issue by replacing CSS transform property with margin-top. HTML2Canvas doesn't work with css transform.