将Html内容发送到服务器以创建PDF Angular 2

时间:2017-08-12 09:55:12

标签: angular

我正在尝试使用角度2应用程序通过使用ElementRef将HTML内容发送到服务器来从服务器端创建pdf但是它只发送HTML部分而不是角度绑定部分。我还想在我的HTML内容中添加CSS部分。所以我想知道ElementRef是最好的方法,或者我应该尝试其他任何方式。

Component.ts

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

@Component({
    selector: 'app-root',
    template: `
    <table>
    <thead>
    <tr>
      <th>username</th>
      <th>email</th>
      <th>name</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of data">
      <td>{{ data.username }}</td>
      <td>{{ data.email }}</td>
      <td>{{ data.first_name }}</td>
    </tr>
    </tbody>
  </table>`
})

export class AppComponent implements AfterContentInit {
  node: string;

  data = [
    {
      "id": 11,
      "username": "abc",
      "email": "abc@gmail.com",
      "first_name": "ramesh"

    },
    {
      "id": 13,
      "username": "btest",
      "email": "btest@gmail.com",
      "first_name": "btest"

    },
    {
      "id": 14,
      "username": "abcd",
      "email": "abcd@gmail.com",
      "first_name": "abcd"

    },
    {
      "id": 15,
      "username": "demotest",
      "email": "demotest@gmail.com",
      "first_name": "demotest",
      "last_name": "demo"

    }
  ]

  constructor(private elementRef: ElementRef) { }

  ngAfterContentInit() {
   this.node = this.elementRef.nativeElement.innerHTML;
  }

}

它只发送以下数据:

<table class="table table-striped">
    <thead>
    <tr>
      <th>username</th>
      <th>email</th>
      <th>name</th>
    </tr>
    </thead>
    <tbody>
    <!--template bindings={}-->
    </tbody>
  </table>

我想发送

<table class="table table-striped">
    <thead>
    <tr>
      <th>username</th>
      <th>email</th>
      <th>name</th>
    </tr>
    </thead>
    <tbody>
    <!--template bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object]"
}--><tr>
      <td>abc</td>
      <td>abc@gmail.com</td>
      <td>ramesh</td>
    </tr><tr>
      <td>btest</td>
      <td>btest@gmail.com</td>
      <td>btest</td>
    </tr><tr>
      <td>abcd</td>
      <td>abcd@gmail.com</td>
      <td>abcd</td>
    </tr><tr>
      <td>demotest</td>
      <td>demotest@gmail.com</td>
      <td>demotest</td>
    </tr>
    </tbody>
  </table>

0 个答案:

没有答案