Content in the PDF is half cut

[vidyaSharvin]

Hi Everyone,

I have tried all the approach to fix the below content break issue from one page to next page.

Can somebody help how to fix this issue or is it a known bug.
pds-ui-dob-1143.pdf

Sample:
https://stackblitz.com/edit/angular-ivy-3n5kuu?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts

[Alexstrem]

@vidyaSharvin
From your sample, you can use this:

openPDF(): void {
const DATA = this.couponPage.nativeElement;
const bounds = DATA.getBoundingClientRect();
const correctOrientation = bounds.height > bounds.width ? 'p' : 'l';
const doc: jsPDF = new jsPDF({
format: [bounds.height + 100, bounds.width],
unit: 'px',
orientation: correctOrientation,
});
doc.html(DATA, {
margin: [0, 0, 0, 0],
callback: (doc) => {
doc.output('dataurlnewwindow');
},
});
}

It will create pdf as one long page. Maybe it could help you.

[akhil-manikandan47]

what if i want to make it into an a4 size pdf, how can i put some pagebreaks without the text getting cut?

downloadFda() {
if (this.item.projectNo) {
this.nzMessageService.loading(Please wait ...);

  let fileName = this.generateFileName().replace(/\s/g, '');
  const DATA = document.getElementById('fdaV2Report');

  if (DATA) {
    const bounds = DATA.getBoundingClientRect();
    const correctOrientation = bounds.height > bounds.width ? 'p' : 'l';

    const pdf = new jsPDF({
      format: [bounds.height + 100, bounds.width],
      unit: 'px',
      orientation: correctOrientation,
    });

    pdf.html(DATA, {
      margin: [0, 0, 0, 0],
      callback: (doc) => {
        if (this.isEmail) {
          const file = doc.output('blob');
          fileName = `${fileName}.pdf`;
          this.isVisible = false;

          this.uploadFileByContainerAndFile(
            this.entityName,
            new File([file], fileName),
            this.item.projectNo
          ).subscribe(
            (filePath) => {
              this.sendPda(filePath, fileName, file);
            },
            (error) => {
              this.uploading = false;
              this.nzMessageService.error(`${error} file upload failed.`);
            }
          );

          this.isEmail = false;
        } else {
          doc.save(fileName);
        }
      },
    });
  } else {
    this.nzMessageService.error('Unable to find the report element.');
  }
}

}