Как извлечь / экспортировать данные HTML в угловом формате HTML

Question

У меня есть приложение, которое накапливает данные с сервера в HTML-странице.В ранней версии я использовал JSP + JS, и моя функция follow использовалась для копирования сгенерированных html-данных в буфер обмена (после этого пользователь может скопировать чистый HTML и вставить его в программу Mozila Thunderbird):

function getHtml() {

    var $div = $('#fullRezult'); 
    var y = $div.html(); 
    $("#myModal2").modal('show'); 
    $('#paste').val(y);

}

Нотеперь я использую Angular 6, и мой контент генерируется по построению следующим образом:

<table class="table table-bordered  table-sm">
            <tbody>
            <tr [ngClass]="{'green': el.id == 1}" *ngFor="let el of childElements">
                <td>{{el.id}}</td>
                <td>{{el.name}}</td>
                <td>{{el.description}}</td>
              <td><span class="badge badge-success">Success</span></td>
              </tr>
            </tbody>
          </table>

Итак, как я могу скопировать чистый чистый html сгенерированной таблицы в какое-то поле textarea в angular 6 ???

Answer 1

Другим вариантом является использование ViewEncapsulation .Создайте пример компонента

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-mycomponent',
    template: `<div class="mycomponent"><h1>It's my component!</h1><p *ngIf="!!variable">{{variable}}</p></div>`,
    encapsulation: ViewEncapsulation.None
})
export class MycomponentComponent implements OnInit {

    variable: 123;

    constructor() { }

    ngOnInit() {}
}

и затем в родительском компоненте. Нажмите кнопку «Создать», чтобы получить HTML-код

<button
    type="button"
    (click)="getHTML()">Get HTML</button>

, наконец, в методе записи родительского компонента, чтобы получить HTML из элемента DOM, используя этот код * 1009.*

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

...

constructor(
    private el: ElementRef
)

getHTML() {

    return this.el.nativeElement
               .querySelector('.mycomponent')
               .outerHTML
               .replace(/<!--[\s\S]*?-->/g, '');
}

Answer 2

Один из вариантов - нацелить и получить внешний HTML-код элемента, HTML-код которого вы хотите захватить.

Ниже приведен один из способов сделать это:

function getElementOuterHTML(element) {
    if (typeof element === 'undefined' || element==null) {
        return '';
    }
    if(!element || !element.tagName) return '';
    if(element.outerHTML) return element.outerHTML;
    try {
        var wrapper = document.createElement('div');
        wrapper.appendChild(node.cloneNode(true));
        return wrapper.innerHTML;
    } catch (e) { return ''; }
}

function getHtml() {
    var tableNodes = document.querySelectorAll('table');
    if (tableNodes.length>0) {
        tableNodes.forEach(function(){
            console.log(getElementOuterHTML(this));
        });
    }
}

Или, в частности,Ваш код может быть:

function getHtml() {

    var $div = $('#fullRezult'); 
    var y = getElementOuterHTML($div[0]); 
    $("#myModal2").modal('show'); 
    $('#paste').val(y);

}