如何在Angular 9中以A4大小拆分HTML页面 [英] How to split HTML Page in A4 size in Angular 9
问题描述
我正在尝试在CV制造商Xing中创建类似的东西-> https://lebenslauf.com/.
I am trying to create something like in Xing the CV maker -> https://lebenslauf.com/.
我确实有不同的对象数组.
但是我无法创建将呈现数据的A4页面，如果数组大于一页，则创建新页面A4并在其中添加数据.
如果数组要大一个大小，则该函数必须是这种函数，然后创建一个新页面a4并将数据放在该页面中.
在stackblitz中，我添加了一个数组和一些随机文本，并设计了一个A4字母.
我提到了这个问题和答案，但是并没有太多帮助.
设置A4纸张大小的CSS .
我试图伪造分页并创建A4尺寸，但没有用.
我在这里用jquery查看了此代码.它可以工作，但是我无法在Angular中进行编译.
https://jsfiddle.net/tm637ysp/10/
有人可以帮我吗?
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 needs to be so if the array is larger for one size, then create a new page a4 and put the data there.
In the stackblitz I have added an array and some random text and designed an A4 letter.
I referred to this question and answer, but didn't help me too much.
CSS to set A4 paper size.
I tried to fake pagination and to create A4 sizes but didn't work.
I looked in this code with jquery there. It works, but I am unable to compile it in Angular.
https://jsfiddle.net/tm637ysp/10/
Can someone help me here ?
我在stackblitz中创建了两个项目.也许他们会帮忙.
https://stackblitz.com/edit/angular-ivy-fjhpdu .
https://stackblitz.com/edit/angular-ivy-uzmdwg
I have created two projects in stackblitz. Maybe they will help.
https://stackblitz.com/edit/angular-ivy-fjhpdu.
https://stackblitz.com/edit/angular-ivy-uzmdwg
我想重新打开这个问题，因为@HirenParekh批准的答案无法按我的意愿工作.
现在的问题是，如果一个对象中的文本很大，则不会实时添加新页面，但前提是我需要重新加载页面.
我认为该代码将仅用于在ngOnInit中呈现用于添加新页面或编辑页面的代码.
为执行该工作而提供的指令，我认为它不能按例外方式工作.
这是他试图帮助我的stackblitz.
https://stackblitz.com/edit/angular-ivy-zjf8rv
I wanted to reopen this question because the approved answer from @HirenParekh it doesn't work as I wanted.
The problem it is now, If the text in one Object it is very large it wont add a new page in a realtime, but only if I reload the page.
I think that the code will be for add new page or edit page will be rendered only in ngOnInit.
The directive that is provided to do that job, I think it is not working as excepted.
Here is the stackblitz what he tried to help me.
https://stackblitz.com/edit/angular-ivy-zjf8rv
这是我要显示数据的代码.
This is the code I am trying to show data.
<div style="transition: transform 0.25s ease 0s;transform: scale(1.3);transform-origin: 50% 0px 0px;backface-visibility: hidden;perspective: 1000px;display: block;margin: 0px 11.5385%;font-size:10px;width: 76.9231%;-webkit-font-smoothing: antialiased;">
<app-paginated-view [pageSize]="'A4'" *ngIf="model" class="Grid-grid-column">
<div pageContent class="row">
<div class="col col-lg-7">
<h4>{{currentUser?.firstName}} {{currentUser?.lastName}}</h4>
</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 pageContent class="Unit-unit-unitGroup"
*ngFor="let personalData of model.personalData; let id = index">
<div pageContent [ngClass]="{ 'isCatActive': selectedCategory === category.PersonalData}">
<ng-container *ngIf="selectedCategory === category.PersonalData" clickOutside (clickOutside)="removeClick()">
<ul>
<li class="fa fa-plus addIconTop" (click)="openDialog()"></li>
<li class="fa fa-plus addIconBottom" (click)="openDialog()"></li>
<li class="fa fa-trash deleteIconRight" (click)="deleteCategory(index)"></li>
<li class="fa fa-arrow-down moveIconDown"></li>
<li class="fa fa-arrow-up moveIconTop"></li>
</ul>
</ng-container>
<div pageContent class="col-md-12" (click)="setCategory(category.PersonalData)">
<div class="row height">
<div class="col-md-4 col-sm-6 text-right tLine"></div>
<h3 class="first-template-paragraphTitle Paragraph-paragraph-title height">
<div class="Text-text-wrapper">
<div class="Text-Text-text">{{'category.PersonalData' | translate}}</div>
</div>
</h3>
</div>
</div>
<div pageContent class="container-fluid">
<ng-container>
<app-personal-data [personalData]="personalData" [model]="model" [id]="id">
</app-personal-data>
</ng-container>
</div>
</div>
</div>
<!-- Career Component -->
<ng-container *ngFor="let careers of model.careers" class="Unit-unit-unitGroup">
<div pageContent class="col-md-12">
<div class="row height">
<div class="col-md-4 col-sm-6 text-right tLine"></div>
<h3 class="first-template-paragraphTitle Paragraph-paragraph-title height">
<div class="Text-text-wrapper">
<div class="Text-Text-text">{{'category.Career' | translate}}</div>
</div>
</h3>
</div>
</div>
<div class="container-fluid" pageContent>
<ng-container *ngFor="let careerObj of careers.subCategories; let i = index">
<app-career [careerObj]="careerObj" [id]="i" [career]="careers" [model]="model"></app-career>
</ng-container>
<ng-container *ngFor="let emptyObj of careers.emptySubContents; let iEmpty = index">
<app-empty-object [emptyObj]="emptyObj" [iEmpty]="iEmpty" [model]="model" [isFromCareer]="true"></app-empty-object>
</ng-container>
</div>
</ng-container>
<!--Education Component-->
<ng-container *ngFor="let education of model.education" class="Unit-unit-unitGroup">
<div pageContent [ngClass]="{ 'isCatActive': selectedCategory === category.Education}">
<ng-container *ngIf="selectedCategory === category.Education" clickOutside (clickOutside)="removeClick()">
<ul>
<li class="fa fa-plus addIconTop" (click)="openDialog()"></li>
<li class="fa fa-plus addIconBottom" (click)="openDialog()"></li>
<li class="fa fa-trash deleteIconRight" (click)="deleteCategory(index)"></li>
<li class="fa fa-arrow-down moveIconDown"></li>
<li class="fa fa-arrow-up moveIconTop"></li>
</ul>
</ng-container>
<div pageContent class="col-md-12" (click)="setCategory(category.Education)">
<div class="row height">
<div class="col-md-4 col-sm-6 text-right tLine"></div>
<h3 class="first-template-paragraphTitle Paragraph-paragraph-title height">
<div class="Text-text-wrapper">
<div class="Text-Text-text">{{'category.Education' | translate}}</div>
</div>
</h3>
</div>
</div>
<div pageContent class="container-fluid">
<ng-container *ngFor="let educationObj of education.subCategories; let i = index" class="col-md-12">
<app-education [educationObj]="educationObj" [id]="i" [education]="education" [model]="model"></app-education>
</ng-container>
</div>
</div>
</ng-container>
<!-- Skills Component-->
<ng-container *ngFor="let skills of model.skills" class="Unit-unit-unitGroup">
<div pageContent [ngClass]="{ 'isCatActive': selectedCategory === category.Skills}">
<ng-container clickOutside *ngIf="selectedCategory === category.Skills" (clickOutside)="removeClick()">
<ul>
<li class="fa fa-plus addIconTop" (click)="openDialog()"></li>
<li class="fa fa-plus addIconBottom" (click)="openDialog()"></li>
<li class="fa fa-trash deleteIconRight" (click)="deleteCategory(index)"></li>
<li class="fa fa-arrow-down moveIconDown"></li>
<li class="fa fa-arrow-up moveIconTop"></li>
</ul>
</ng-container>
<div pageContent class="col-md-12" (click)="setCategory(category.Skills)">
<div class="row height">
<div class="col-md-4 col-sm-6 text-right tLine"></div>
<h3 class="first-template-paragraphTitle Paragraph-paragraph-title height">
<div class="Text-text-wrapper">
<div class="Text-Text-text">{{'category.Skills' | translate}}</div>
</div>
</h3>
</div>
</div>
<div pageContent class="container-fluid">
<ng-container *ngFor="let skillObj of skills.subCategories; let i = index" class="col-md-12">
<app-skills [skillObj]="skillObj" [id]="i" [skills]="skills" [model]="model"></app-skills>
</ng-container>
</div>
</div>
</ng-container>
</app-paginated-view>
</div>
这是CSS
.A4 {
width: 595px;
height: 842px;
padding: 25px 25px;
position: relative;
}
这是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": ""
}
]
}
]
}
这是Paginated view class for adding new page and splitting pages
<!-- display: none style will any child that does not have #pageContent local variable defined -->
<div class="content-wrapper" #contentWrapper style="display: block">
</div>
<div class="paginated-view" #paginatedView>
</div>
export class PaginatedViewComponent implements AfterViewInit {
@Input() pageSize: "A3" | "A4" = "A4";
@ViewChild("paginatedView") paginatedView: ElementRef<HTMLDivElement>;
@ViewChild("contentWrapper") contentWrapper: ElementRef<HTMLDivElement>;
@ContentChildren(PageContentDirective, { read: ElementRef })
elements: QueryList<ElementRef>;
constructor(private changeDetector: ChangeDetectorRef ) {}
ngAfterViewInit(): void {
this.updatePages();
// when ever childs updated call the updatePagesfunction
this.elements.changes.subscribe((el) => {
this.updatePages();
});
}
updatePages(): void {
// clear paginated view
this.paginatedView.nativeElement.innerHTML = "";
// get a new page and add it to the paginated view
let page = this.getNewPage();
this.paginatedView.nativeElement.appendChild(page);
let lastEl: HTMLElement;
// add content childrens to the page one by one
this.elements.forEach((elRef) => {
const el = elRef.nativeElement;
// if the content child height is larger than the size of the page
// then do not add it to the page
if (el.clientHeight > page.clientHeight) {
return;
}
// add the child to the page
page.appendChild(el);
// after adding the child if the page scroll hight becomes larger than the page height
// then get a new page and append the child to the new page
if (page.scrollHeight > page.clientHeight) {
page = this.getNewPage();
this.paginatedView.nativeElement.appendChild(page);
page.appendChild(el);
}
lastEl = el;
});
this.changeDetector.detectChanges();
// bring the element in to view port
// lastEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
}
getNewPage(): HTMLDivElement {
const page = document.createElement("div");
page.classList.add("page");
page.classList.add(this.pageSize);
return page;
}
}
@Directive({
// tslint:disable-next-line: directive-selector
selector: "[pageContent]"
})
export class PageContentDirective {
}
推荐答案
这是将给定内容划分为适合给定页面大小的全部内容.
It is all about dividing the given content to fit into the give page size.
我们可以创建一个组件来为我们处理分隔功能.这是一个StackBlitz 演示.
We can create a component that will handle the dividing functionality for us. here is a StackBlitz Demo.
这是一个简短的解释.
使用ContentChildren装饰器观察内容的变化.每次内容更改时，我们将运行页面创建逻辑.
Use the ContentChildren decorator to observe the change in content. every time the content changes we will run the page creation logic.
import {
AfterContentInit,
AfterViewInit,
Component,
ContentChildren,
ElementRef,
Input,
OnInit,
QueryList,
ViewChild
} from "@angular/core";
@Component({
selector: "app-paginated-view",
templateUrl: "paginated-view.component.html",
styleUrls: ["paginated-view.component.scss"]
})
export class PaginatedViewComponent implements AfterViewInit {
@Input() pageSize: "A3" | "A4" = "A4";
@ViewChild("paginatedView") paginatedView: ElementRef<HTMLDivElement>;
@ViewChild("contentWrapper") contentWrapper: ElementRef<HTMLDivElement>;
@ContentChildren("pageContent", { read: ElementRef }) elements: QueryList<
ElementRef
>;
constructor() {}
ngAfterViewInit(): void {
this.updatePages();
// when ever childs updated call the updatePagesfunction
this.elements.changes.subscribe(el => {
this.updatePages();
});
}
updatePages(): void {
// clear paginated view
this.paginatedView.nativeElement.innerHTML = "";
// get a new page and add it to the paginated view
let page = this.getNewPage();
this.paginatedView.nativeElement.appendChild(page);
let lastEl: HTMLElement;
// add content childrens to the page one by one
this.elements.forEach(elRef => {
const el = elRef.nativeElement;
// if the content child height is larger than the size of the page
// then do not add it to the page
if (el.clientHeight > page.clientHeight) {
return;
}
// add the child to the page
page.appendChild(el);
// after adding the child if the page scroll hight becomes larger than the page height
// then get a new page and append the child to the new page
if (page.scrollHeight > page.clientHeight) {
page = this.getNewPage();
this.paginatedView.nativeElement.appendChild(page);
page.appendChild(el);
}
lastEl = el;
});
//bring the element in to view port
lastEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
}
getNewPage(): HTMLDivElement {
const page = document.createElement("div");
page.classList.add("page");
page.classList.add(this.pageSize);
return page;
}
}
我们可以在这样的应用程序中使用此组件.
We can use this component in an application like this.
<app-paginated-view [pageSize]="'A4'">
<h1 #pageContent>Hello World!!</h1>
<p #pageContent>This content will be displayed in an A4 size page</p>
</app-paginated-view>
我们必须提供模板变量#pageContent，以便我们可以在PaginatedViewComponent中使用@ContentChildren来选择它们.
We have to provide the template variable #pageContent so that we can select them using @ContentChildren in our PaginatedViewComponent.
请注意，我们在这里使用本地dom API来更改dom结构.只会将dom节点从一个位置移动到另一个位置，因此，如果您添加了任何事件侦听器或将任何属性绑定到内容子项，它们将按原样工作.
Note that we are using native dom APIs here to change the dom structure. it will only move the dom node from one place to another so if you have any event listener added or have any property binding to the content children they will work as it is.
修改: 我也更新了你的stackblitz https://stackblitz.com/edit/angular-ivy-zjf8rv
I have also updated your stackblitz https://stackblitz.com/edit/angular-ivy-zjf8rv
这篇关于如何在Angular 9中以A4大小拆分HTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
