使用angular4下载pdf格式的网页答案

【问题标题】：Download a webpage in pdf format using angular4使用angular4下载pdf格式的网页
【发布时间】：2018-01-24 14:05:38
【问题描述】：

我是 Angular 4 的新手。我需要下载一个 pdf 格式的 HTML 网页，并且该 html 网页包含输入 [(ngModel)] 等角度控件，单选按钮 [已选中] 。它在 pdf 文件中显示 undefined，而不是显示控制值。

我尝试使用 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">
                        &nbsp;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">
                        &nbsp;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">
                        &nbsp;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>

【问题讨论】：

html2canvas 未正确包含。你可以试试在index.html<script></script>使用它
@NikhilRadadiya 不包括 html2canvas 脚本我们可以下载 pdf 格式的 html
@Vignesh 如果 html 的设计对你很重要，那么使用 html2canvas，否则对于像表格这样的普通设计，你可以使用 pdfmake
@NikhilRadadiya 我们可以在供应商文件中导入 html2canvas，我们可以在所有组件中访问该文件吗
@Vignesh 我已将其添加到 index.html 中，然后将 declare let html2pdf; 添加到任何组件中

标签： angular webpack-2 jspdf html2canvas typescript2.4

【解决方案1】：

您需要全局导入/html2canvas/dist/html2canvas.min.js 脚本，您可以按照here 和angular-cli.json 文件scripts: [] 部分中的here 中的说明进行操作。

那么只有import * as jsPDF from 'jspdf';，你的错误就会消失。

请注意，如果您使用的是ng serve，则必须重新启动您的应用才能正确加载脚本。

【讨论】：