我正在尝试在 Xing the CV maker -> https://lebenslauf.com/ 中创建类似的东西。
我确实有不同的对象数组。
但我无法创建将呈现数据的 A4 页面，如果数组大于一页，则创建新页面 A4 并在那里添加数据。
该函数需要如此，如果数组对于一个大小来说更大，则创建一个新页面 a4 并将数据放在那里。
在 stackblitz 中，我添加了一个数组和一些随机文本，并设计了一个 A4 字母。
我提到了这个问题和答案，但对我没有太大帮助。
CSS to set A4 paper size 。
我试图伪造分页并创建 A4 尺寸，但没有奏效。
我在那里用jquery查看了这段代码。它可以工作，但我无法在 Angular 中编译它。
https://jsfiddle.net/tm637ysp/10/
有人可以在这里帮助我吗？
我在 stackblitz 中创建了两个元素。也许他们会有所帮助。
https://stackblitz.com/edit/angular-ivy-fjhpdu 。
https://stackblitz.com/edit/angular-ivy-uzmdwg
我想重新打开这个问题，因为来自@HirenParekh 的批准答案不能按我的意愿工作。
现在的问题是，如果一个对象中的文本非常大，它不会实时添加新页面，但前提是我重新加载页面。
我认为代码将用于添加新页面或编辑页面将仅在 ngOnInit 中呈现。
为完成这项工作而提供的指令，我认为它不能正常工作。
这是他试图帮助我的stackblitz。
https://stackblitz.com/edit/angular-ivy-zjf8rv
这是我试图显示数据的代码。
<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>
.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 {
}
最佳答案
这一切都是关于划分给定的内容以适应给定的页面大小。
我们可以创建一个组件来为我们处理分割功能。这是一个 StackBlitz Demo .
这是一个简短的解释。
使用 ContentChildren装饰器来观察内容的变化。每次内容更改时，我们都会运行页面创建逻辑。
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;
}
}
<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>
请注意，我们在这里使用原生 dom API 来更改 dom 结构。它只会将 dom 节点从一个地方移动到另一个地方，因此如果您添加了任何事件监听器或将任何属性绑定(bind)到内容子项，它们将按原样工作。
编辑:
我还更新了你的 stackblitz
https://stackblitz.com/edit/angular-ivy-zjf8rv
关于javascript - 如何在 Angular 9 中将 HTML 页面拆分为 A4 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64133505/