I m creating a pdf of a table it has created successfully by jsPdf but in pdf all content not showing due to very large content text. I tried to fix by reducing font size in css but it couldn't. Here is my stackblitz link:

HTML

<div>
                <div id="pdfTable" #pdfTable id="hufform">
                    <div >Form Type:-{{selformType}}</div>
                    <table >
                        <tr><td colspan="6"><h2> A. IDENTITY DETAILS</h2></td></tr>
                        <tr><td>1.</td><td>Name of the Applicant</td><td colspan="4">{{docName}}</td></tr>
                         <tr><td>2.</td><td>Date of incorporation</td><td >{{datOfincorpo}}</td><td>Place of incorporation</td><td colspan="2">{{placeincopo}}Bhopal</td></tr>
                        <tr><td>3.</td><td>Date of commencement of business</td><td colspan="4">{{datecommence}}</td></tr>
                        <tr><td>4</td><td>a) PAN</td><td>{{pan}}</td><td>b) Registration No. (e.g. CIN)</td><td colspan="2">{{regisNum}}</td></tr>
                        <tr><td colspan="6"><h2> B. CONTACT DETAILS</h2></td></tr>
                        <tr><td>1</td><td>Correspondence Address</td><td colspan="4">{{corresAddr}}</td></tr>
                        <tr><td>2</td><td>Specify the proof of address submitted for correspondence address</td><td colspan="4"></td></tr>
                        <tr><td rowspan="3" >3</td><td rowspan="3">Contact Details</td><td>Tel.(off.)</td><td>07554268560</td><td>Tel. (Res.)</td><td>0755-4268599</td></tr>
                        <tr><td >Mobile No.</td><td>{{mobiData}}</td><td>Fax No.&nbsp; </td><td>Not avaliable</td></tr>
                        <tr><td >Email ID</td><td colspan="3">{{email}}</td></tr>
                        <tr><td colspan="6"><h2>C. OTHER DETAILS</h2></td></tr>
                        <tr><td>4</td><td>Registered Address (if different from above):</td><td colspan="5">NO</td></tr>
                        <tr><td colspan="6">C. OTHER DETAILS</td></tr>
                        <tr><td colspan="6">Name, PAN, residential address and photographs of Promoters/Partners/Karta/Trustees and whole time directors:</td></tr>
                        <tr><td>1</td><td >Name&nbsp;</td><td>{{docName}}</td><td>PAN</td><td>{{pan}}</td><td rowspan="4">photograph</td></tr>
                        <tr><td>2</td><td>residential address</td><td colspan="3">{{corresAddr}}</td></tr>
                        <tr><td>3</td><td>DIN of whole time directors:</td><td colspan="3"></td></tr>
                        <tr><td>4</td><td>Aadhaar number of Promoters/Partners/Karta</td><td colspan="3">{{adhar}}</td></tr>
                        <tr><td colspan="6"><h2>D. Declaration</h2></td></tr>
                        <tr><td colspan="6"><input type="checkbox" name="" checked> I/We hereby declare that the details furnished above are true and correct to the best of my/our knowledge and belief and I/we undertake to inform you of any changes therein, immediately. In case any of the above information is found to be false or untrue or misleading or misrepresenting, I am/we are aware that I/we may be held liable for it.
                           
                           <div >
                            <div ><p> Name & Signature of the Authorised Signatory(ies) &nbsp;{{docName}} </p></div>
                            <div > <p > place:- &nbsp;{{city}}</p><p  >Date:- &nbsp;{{date |date:'dd/MM/yyy'}}&nbsp;{{date|date:'shortTime'}}</p></div>
                           </div> 
                        
    
                    </table>
                </div>
                <div (click)="dwdHufForm()">Download Pdf</div>
            </div>

TS

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import jsPDF from 'jspdf';

@ViewChild('pdfTable', {static: false}) pdfTable!: ElementRef;

dwdHufForm(){
          const DATA = this.pdfTable.nativeElement;
          const doc: jsPDF = new jsPDF("p", "mm", "a4");
          doc.setFontSize(5)
          doc.html(DATA, {
            callback: (doc) => {
              doc.output("dataurlnewwindow");
            }
         });
     }

CodePudding user response：

try this configuration:

 doc.html(DATA, {
  callback: (doc) => {
    doc.output("dataurlnewwindow");
  },
  margin: [0, 0, 0, 0],
  x: 10,
  y: 10,
  html2canvas: {
    scale: 0.3,
    width: 1000 
  },
 });