Sunday 4 October 2020

How to split HTML Page in A4 size in Angular 9

I am trying to create something like in Xing the CV maker -> https://lebenslauf.com/.

I do have different Arrays of Objects. But I am not able to create the A4 pages which will render the data and if the array it is larger than one page create new page A4 and add data there. The function need to be so, if the array is larger for one size then create new page a4 and put the data there. In the stackblitz I have added an array and some random text and designed a A4 letter. I refered to this question and answer but didnt help me to much. CSS to set A4 paper size.
I tried to fake pagination and to create A4 sizes but didn't work.

I have created two project in stackblitz maybe they will help.
https://stackblitz.com/edit/angular-ivy-fjhpdu.
https://stackblitz.com/edit/angular-ivy-uzmdwg

This is the code I am trying to show data

<ng-container *ngIf="currentUser">
<div class="container">
<div id="appView" class="row justify-content-center">
  <div class="col-md-8 softDarkShadow">
    <div class="clearfix">
      <div class="row">
        <div class="col col-lg-7">
          <h4> </h4>
          <h3>
            <input [ngModel]="personalData?.job" (ngModelChange)="updateJob($event)" placeholder="Your Job Type">
          </h3>

        </div>
        <div class="col text-right">
          <input type="file" accept="image/*" (change)="readUrl($event)">
          <img [src]="url" (change)="readUrl($event)" height="128" style="cursor:  pointer">

        </div>
      </div>
      <div class="container">
        <div *ngFor="let personalData of model.personalData; let i = index">
          <app-personal-data [personalData]="personalData" [model]="model" [index]="i">
          </app-personal-data>
        </div>
        <div *ngFor="let career of model.careers; let i = index;">
          <app-career [career]="career" [model]="model" [index]="i"></app-career>
        </div>
        <div *ngFor="let education of model.education;">
          <app-education [education]="education" [model]="model"></app-education>
        </div>
        <div *ngFor="let skills of model.skills;">
          <app-skills [skills]="skills" [model]="model"></app-skills>
        </div>
      </div>
    </div>
  </div>
</div>

This is the json

{
    "personalData": [
        {
  
            "firstName": "Max",
            "lastName": "Muster",
            "email": "max.musterman@outlook.com",
            "birthday": "2020-09-25T00:00:00.000Z",
            "telephone": "0123456789",
            "job": "Freelancer",
            "country": "Germany",
            "postalCode": 12345,
            "city": "None",
            "title": 2,
            "gender": 0,
            "street": "Musterman 12",
            "state": "",
            "status": 1,
            "showBirthday": true
        }
    ],
    "skills": [
        {
            "subCategories": [
                {
                    "languages": [
                        {
                            "name": "languages.de",
                            "rate": 5
                        },
                        {
                            "name": "languages.al",
                            "rate": 1
                        },
                        {
                            "name": "languages.en",
                            "rate": 5
                        },
                        {
                            "name": "languages.fr",
                            "rate": 4
                        },
                        {
                            "name": "languages.it",
                            "rate": 4
                        }
                    ],
                    "pcKnowledge": [
                        {
                            "_id": "5f5ca07e4dba443f786ea7ae",
                            "name": "Word"
                        },
                        {
                            "_id": "5f5ca07e4dba443f786ea7af",
                            "name": "Adobe Photoshop"
                        },
                        {
                            "_id": "5f5fd46bb21df2444c39f317",
                            "name": "Test"
                        },
                        {
                            "_id": "5f5fd46bb21df2444c39f318",
                            "name": "Excel"
                        },
                        {
                            "_id": "5f5fd46bb21df2444c39f319",
                            "name": "Ja"
                        },
                        {
                            "_id": "5f72339552009b4244391972",
                            "name": "Powerpoint"
                        }
                    ],
                    "skillsOffer": [
                        {
                            "_id": "5f4a4e2d718d33092df2c327",
                            "name": "Angular"
                        },
                        {
                            "_id": "5f4a4e2d718d33092df2c327",
                            "name": "Java"
                        },
                        {
                            "_id": "5f4a4e2d718d33092df2c327",
                            "name": "Typescript"
                        },
                        {
                            "_id": "5f4a4e2d718d33092df2c327",
                            "name": "html"
                        },
                        {
                            "name": "Javascript"
                        }
                    ],
                    "driveLicenses": [
                        {
                            "_id": "5f5ca07e4dba443f786ea7ac",
                            "name": "B"
                        },
                        {
                            "_id": "5f5ca07e4dba443f786ea7ad",
                            "name": "C"
                        },
                        {
                            "_id": "5f5f204faa5d0205180bd581",
                            "name": "B"
                        }
                    ],
                    "name": "",
                    "qualifications": ""
                }
            ]
        }
    ]
}


from How to split HTML Page in A4 size in Angular 9

No comments:

Post a Comment