Question

我对angular2很陌生。我需要有多个输入字段供用户填写，提交后，将下载包含他们输入字段的PDF。我正在尝试使用jspdf，但不确定我是否使用正确。在这种情况下，如果用户输入name并选择power，则我想下载一个包含他们选择的名称和权限的文档。我认为我并没有正确地调用这些元素，因为我使用的是{{model.name}}和{{model.power}}，这正是我的错误所在。谢谢。

documentation.component.ts

import { Component, OnInit, Inject, } from '@angular/core';
import {Documentation} from "./documentation";
import * as jsPDF from 'jspdf'

@Component({
  selector: 'app-documentation',
  templateUrl: './documentation.component.html',
  styleUrls: ['./documentation.component.css'],
  providers: [
    { provide: 'Window',  useValue: window }
  ]
})
export class DocumentationComponent  {

  powers = ['Really Smart', 'Super Flexible',
  'Super Hot', 'Weather Changer'];

model = new Documentation(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

submitted = false;

onSubmit() {  
   var doc = new jsPDF();
   doc.text(20, 20, {{model.name}});
   doc.text(20, 30, {{model.power}});
   doc.addPage();
   doc.text(20, 20, 'success!');

   // Save the PDF
   doc.save('Test.pdf');
 }
}

documentation.ts

export class Documentation {

    constructor(
      public id: number,
      public name: string,
      public power: string,
      public alterEgo?: string
    ) {  }

  }

documentation.component.html

<div class="container-fluid" style="margin-top: 20px;">
    <div class="container">
        <h1>Hero Form</h1>
        <form (ngSubmit)="onSubmit()" #documentationForm="ngForm">
            <div class="form-group">
                    <label class = "name" for="name">Name</label>
                    <input type="text" class="form-control" id="name"
                           required
                           [(ngModel)]="model.name" name="name"
                           #name="ngModel">
                    <div [hidden]="name.valid || name.pristine"
                         class="alert alert-danger">
                      Name is required
                    </div>
              </div>


          <div class="form-group">
            <label for="alterEgo">Alter Ego</label>
            <input type="text"  class="form-control" id="alterEgo"
                   [(ngModel)]="model.alterEgo" name="alterEgo">
          </div>

          <div class="form-group">
            <label for="power">Hero Power</label>
            <select class="form-control"  id="power"
                    required
                    [(ngModel)]="model.power" name="power">
              <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
            </select>
          </div>

          <button type="submit" class="btn btn-success" [disabled]="!documentationForm.form.valid">Download</button>

        </form>
    </div>
    </div>

错误：

Module parse failed: Unexpected token (19:38)
You may need an appropriate loader to handle this file type.
|     DocumentationComponent.prototype.onSubmit = function () {
|         var doc = new jsPDF();
|         doc.text(20, 20, {}, { model: .name });
|     };
|     ;

Answer 1

通常，我们在构造函数中获取实例，并使用this.model而不是{{model}}。

class ... {
    model = null;
    constructor() {
        this.model = new Documentation(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
    }
onSubmit() {  
   var doc = new jsPDF();
   doc.text(20, 20, this.model.name);
   doc.text(20, 30, this.model.power);
   doc.addPage();
   doc.text(20, 20, 'success!');

   // Save the PDF
   doc.save('Test.pdf');
 }
}

Angular2-HTML表单提交下载pdf

1 个答案: