使用angular4下载pdf格式的网页 [英] Download a webpage in pdf format using angular4
本文介绍了使用angular4下载pdf格式的网页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是angular 4的新手.我需要下载pdf格式的HTML网页，并且该html网页包含诸如 [(ngModel)] 输入，单选按钮 [已选中]之类的角度控件. . 而不是显示控制值，而是在pdf文件中显示未定义.
我尝试使用 jsPdf& html2Pdf 但它会引发错误
错误:
You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js
at Object.jsPDFAPI.addHTML (jspdf.debug.js?6964:4049)
TS文件的代码:
import { Component, ViewChild, Compiler, ComponentRef, OnInit, EventEmitter, ElementRef } from "@angular/core";
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';
@Component({
templateUrl: "./dashboard.html"
})
export class DashboardComponent implements OnInit {
ngOnInit() {
}
pdf() {
let pdf = new jsPDF();
let options = {
pagesplit: true
};
pdf.addHTML(document.getElementById("htmlform"), 0, 0, options, () => {
pdf.save("test.pdf");
});
}
}
HTML代码
<div>
<button type="button" (click)="pdf()"></button>
</div>
<ng-component>
<html id="htmlform">
<head>
DashBoard
</head>
<body>
<h3>
Person Details
</h3>
<table>
<tbody>
<tr class="BorderTopSec">
<td colspan="2">
<div class="label">
NAME:
</div>
<input name="person_name" type="text" [(ngModel)]="model.Name" [ngModelOptions]="{standalone:true}" />
</td>
</tr>
<tr>
<td rowspan="4" style="border-width: 1px 1px 1px 0px; border-style: solid solid solid none; border-color: black black black white; width: 164px;">
<img height="150" id="imgPhoto" src="" width="155" />
</td>
</tr>
<tr>
<td>
<div class="label">
LOCATION:
</div>
<select name="LOCATION" style="border: currentColor; width: 95px; font-size: 13px;" [(ngModel)]="model.location">
<option *ngFor="let item of model.location" [ngValue]="locationId">{{item.location}}</option>
</select>
</td>
</tr>
<tr>
<td>
<div class="label">
SEX:
</div>
</td>
<td>
<md-radio-group>
<md-radio-button value="1" [ngModelOptions]="{standalone:true}" >Option 1</md-radio-button>
<md-radio-button value="2" [ngModelOptions]="{standalone:true}" >Option 2</md-radio-button>
</md-radio-group>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</ng-component>
解决方案
然后只有import * as jsPDF from 'jspdf';，您的错误就会消失.
请注意，如果您使用的是ng serve，则必须重新启动应用程序才能正确加载脚本.
I am new for angular 4. I need to download a HTML webpage in pdf format and the html webpage contains angular controls like input [(ngModel)], radio button [checked]. Rather than showing the control values it shows undefined in the pdf file.
I tried using jsPdf & html2Pdf But it throws error
Error:
You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js
at Object.jsPDFAPI.addHTML (jspdf.debug.js?6964:4049)
Code for TS File:
import { Component, ViewChild, Compiler, ComponentRef, OnInit, EventEmitter, ElementRef } from "@angular/core";
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';
@Component({
templateUrl: "./dashboard.html"
})
export class DashboardComponent implements OnInit {
ngOnInit() {
}
pdf() {
let pdf = new jsPDF();
let options = {
pagesplit: true
};
pdf.addHTML(document.getElementById("htmlform"), 0, 0, options, () => {
pdf.save("test.pdf");
});
}
}
Code for HTML
<div>
<button type="button" (click)="pdf()"></button>
</div>
<ng-component>
<html id="htmlform">
<head>
DashBoard
</head>
<body>
<h3>
Person Details
</h3>
<table>
<tbody>
<tr class="BorderTopSec">
<td colspan="2">
<div class="label">
NAME:
</div>
<input name="person_name" type="text" [(ngModel)]="model.Name" [ngModelOptions]="{standalone:true}" />
</td>
</tr>
<tr>
<td rowspan="4" style="border-width: 1px 1px 1px 0px; border-style: solid solid solid none; border-color: black black black white; width: 164px;">
<img height="150" id="imgPhoto" src="" width="155" />
</td>
</tr>
<tr>
<td>
<div class="label">
LOCATION:
</div>
<select name="LOCATION" style="border: currentColor; width: 95px; font-size: 13px;" [(ngModel)]="model.location">
<option *ngFor="let item of model.location" [ngValue]="locationId">{{item.location}}</option>
</select>
</td>
</tr>
<tr>
<td>
<div class="label">
SEX:
</div>
</td>
<td>
<md-radio-group>
<md-radio-button value="1" [ngModelOptions]="{standalone:true}" >Option 1</md-radio-button>
<md-radio-button value="2" [ngModelOptions]="{standalone:true}" >Option 2</md-radio-button>
</md-radio-group>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</ng-component>
解决方案
You need to globally import the /html2canvas/dist/html2canvas.min.js script, you can do it like stated here and documented here within the angular-cli.json files in the scripts: [] section.
Then only import * as jsPDF from 'jspdf'; and your error will disappear.
Please note that if you're using ng serve you'll have to restart your app to correctly load the script.
这篇关于使用angular4下载pdf格式的网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
