From 9c3b6df874275fbb7022932a69ef1441783024e9 Mon Sep 17 00:00:00 2001 From: Bastian Dehn Date: Fri, 17 Jun 2022 18:55:01 +0200 Subject: [PATCH] change: create html with dom document --- src/app/html-export.service.ts | 117 ++++++++++++++++++++++----------- 1 file changed, 79 insertions(+), 38 deletions(-) diff --git a/src/app/html-export.service.ts b/src/app/html-export.service.ts index 4ff8452..ee34936 100644 --- a/src/app/html-export.service.ts +++ b/src/app/html-export.service.ts @@ -30,26 +30,42 @@ export class HtmlExportService public exportHtml(foodcard: IFoodCard): Observable { let observ = new Observable((observ) => { - let html: string = ''; - html += ''; - html += ''; - html += ''; - html += 'Speisekarte'; - html += ''; - html += ''; - html += ''; - html += ''; - html += '

'; - html += this.createHtmlTitles(foodcard.Titles); - html += '

Fragen zu Allergenen beantwortet Ihnen gerne unser Servicepersonal

'; - html += '

'; - html += '' - html += ''; - let result = this.sanitizer.bypassSecurityTrustUrl("data:text/html;charset=UTF-8," + html); + let doctype = ""; + let doc = document.implementation.createHTMLDocument(); + doc.documentElement.lang = "de"; + doc.title = "Speisekarte"; + + let element = document.createElement("meta"); + element.setAttribute("charset", "utf-8"); + doc.head.appendChild(element); + + element = document.createElement("meta"); + element.setAttribute("name", "viewport"); + element.setAttribute("content", "width=device-width, initial-scale=1"); + doc.head.appendChild(element); + + let styleElement = document.createElement("style"); + styleElement.setAttribute("type", "text/css"); + styleElement.setAttribute("media", "screen"); + styleElement.innerHTML = this.cssExportContent; + doc.head.appendChild(styleElement); + + styleElement = document.createElement("style"); + styleElement.setAttribute("type", "text/css"); + styleElement.setAttribute("media", "print"); + styleElement.innerHTML = this.cssPrintExportContent; + doc.head.appendChild(styleElement); + + let divElement = document.createElement("div"); + divElement.classList.add("foodcard"); + divElement.appendChild(this.createHtmlTitles(foodcard.Titles)); + doc.body.appendChild(divElement); + + let pElement = document.createElement("p"); + pElement.innerText = "Fragen zu Allergenen beantwortet Ihnen gerne unser Servicepersonal"; + doc.body.appendChild(pElement); + + let result = this.sanitizer.bypassSecurityTrustUrl("data:text/html;charset=UTF-8," + doctype + doc.documentElement.outerHTML); observ.next(result); }); @@ -69,42 +85,67 @@ export class HtmlExportService }); } - private createHtmlTitles(titles: ITitle[]): string + private createHtmlTitles(titles: ITitle[]): HTMLDivElement { - let titlestring = ""; + let divElement = document.createElement("div"); + divElement.classList.add("title"); + let element = document.createElement("h1"); for (let i = 0; i < titles.length; i++) { - titlestring += '

' + titles[i].Title + '

'; - titlestring += this.createHtmlSubtitles(titles[i].Subtitles); + element = document.createElement("h1"); + element.innerText = titles[i].Title; + divElement.appendChild(element); + divElement.appendChild(this.createHtmlSubtitles(titles[i].Subtitles)); } - return titlestring; + return divElement; } - private createHtmlSubtitles(subtitles: ISubtitle[]): string + private createHtmlSubtitles(subtitles: ISubtitle[]): HTMLDivElement { - let subtitlestring = ""; + let divElement = document.createElement("div"); + divElement.classList.add("subtitle"); + let element = document.createElement("h2"); for (let i = 0; i < subtitles.length; i++) { - subtitlestring += '

' + subtitles[i].Subtitle + '

'; - subtitlestring += this.createHtmlFoods(subtitles[i].Foods); + element = document.createElement("h2"); + element.innerText = subtitles[i].Subtitle; + divElement.appendChild(element); + divElement.appendChild(this.createHtmlFoods(subtitles[i].Foods)); } - return subtitlestring; + return divElement } - private createHtmlFoods(foods: IFood[]): string + private createHtmlFoods(foods: IFood[]): HTMLDivElement { - let foodstring = ""; + let divElement = document.createElement("div"); + divElement.classList.add("foods"); + let divSubElement = document.createElement("div"); + let divFoodElement = document.createElement("div"); for (let i = 0; i < foods.length; i++) { - foodstring += '

'; - foodstring += '

' + foods[i].Food + '

'; - foodstring += '

' + foods[i].sideDish + '

'; - foodstring += '

' + foods[i].price + '

' - foodstring += '

'; + divSubElement = document.createElement("div"); + divSubElement.classList.add("grid"); + divSubElement.classList.add("foodmenu"); + divElement.appendChild(divSubElement); + + divFoodElement = document.createElement("div"); + divFoodElement.classList.add("food"); + divFoodElement.innerText = foods[i].Food; + divSubElement.appendChild(divFoodElement); + + divFoodElement = document.createElement("div"); + divFoodElement.classList.add("sideDish"); + divFoodElement.innerText = foods[i].sideDish; + divSubElement.appendChild(divFoodElement); + + divFoodElement = document.createElement("div"); + divFoodElement.classList.add("price"); + divFoodElement.innerText = foods[i].price; + divSubElement.appendChild(divFoodElement); } - return foodstring; + return divElement; } } -- 2.39.5