如何以 HTML 格式以角度提取/导出 html 数据答案

【问题标题】：How to extract/export html data in angular in HTML format如何以 HTML 格式以角度提取/导出 html 数据
【发布时间】：2018-12-14 13:58:31
【问题描述】：

我有一个应用程序，它在 HTML 页面中从服务器收集数据。在早期版本中，我使用 JSP + JS 并且我的跟随功能已用于将生成的 html-data 复制到剪贴板（之后用户可以复制清晰的 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 复制到 Angular 6 中的某个 textarea 字段？？？

【问题讨论】：

标签： javascript html angular copy

【解决方案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() {}
}

然后在父组件View中创建按钮获取HTML代码

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

最终在父组件中使用此代码编写方法从 DOM 元素中获取 HTML

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

...

constructor(
    private el: ElementRef
)

getHTML() {

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

【讨论】：

【解决方案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);

}

【讨论】：