html2canvas和jsPDF，css样式在pdf中错误显示

Question

下面是我的网站图片

这是html2canvas和jspdf呈现的pdf图像的图像

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

}

在这里，我正在使用html2canvas将html转换为图像，然后使用jspdf将其转换为pdf。但是，css样式在此过程中变得一团糟。占位符位置应为绝对值，且应为前0； pdf中的返回错误。

Answer 1

我通过将CSS转换属性替换为margin-top解决了上述问题。 HTML2Canvas不适用于CSS转换。