我对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 });
| };
| ;
答案 0 :(得分: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');
}
}