Question

我的代码有问题。我的要求是我想将HTML下载为PDF。现在，我可以下载<p>标签等文本。但是，我无法将Image和Canvas标签下载为PDF。

这是我的 dashboard.component.html

<div *ngIf="perAnaNoData == false" >
    <p id="content" #content style="text-align: center;font-size: 16px;" *ngIf="performanceAnalysisDrill == false">Performance Analysis (Recent 5 Test)</p>
    <img src="../../../assets/img/drillImage.png" *ngIf="performanceAnalysisDrill == false" style="height: 20px;width: auto;float: right;margin-right: 100px;" tooltip="Click on data labels to drilldown">
       <div style="height: 180px;width:400px;margin-left: 5%;"  *ngIf="performanceAnalysisDrill == false">
          <div style="display: block;">
               <canvas baseChart height="180" width="400"
                    [datasets]="performanceAnalysisBarData"
                    [labels]="performanceAnalysisBarLabels"
                    [options]="performanceAnalysisBarOptions"
                    [colors]="performanceAnalysisColors"
                    [legend]="performanceAnalysisBarLegend"
                    [chartType]="performanceAnalysisBarType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="performanceAnalysisDrillClicked($event)">
               </canvas>
           </div>
       </div>
</div>


<button (click)="downloadPDF()">Export to PDF</button>

这是我的 dashboard.compoenet.ts 文件

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

....
....
import * as jsPDF from 'jspdf';

export class DashboardComponent implements OnInit,OnDestroy  {
  @ViewChild('content') content:ElementRef;

  public downloadPDF(){

     let doc = new jsPDF();

     let specialElementHandlers = {
          '#editor': function (element, renderer){
           return true;
           }
     };

  let content = this.content.nativeElement;

  doc.fromHTML(content.innerHTML,15,15, {
     'width':190,
     'elementHandlers': specialElementHandlers
  },
  function(downloadAsPDF){doc.save('saveInCallBack.pdf');});

  }
}

我不知道如何找到解决方案以下载它。任何人都可以帮助我...

Answer 1

我找到了解决办法，

  public downloadPDF(){
       let pdf = new jsPDF();
       let options = {
          pagesplit: true
       };
       pdf.addHTML(this.content.nativeElement, 0, 0, options, () => {
          pdf.save("test.pdf");
       });

  }

无法将Angular 2中的HTML图像和Canvas标签下载为PDF

1 个答案: