doc.fromHTML 不是 angular 6 的函数答案

【问题标题】：doc.fromHTML is not a function with angular 6doc.fromHTML 不是 angular 6 的函数
【发布时间】：2019-05-27 01:59:02
【问题描述】：

我想将模板 html 导出为 pdf，我正在尝试将 jsPDF lib 与 angular 一起使用，但出现此错误 doc.fromHTML is not a function。

import { Component, ViewChild, ElementRef } from '@angular/core';
import * as jsPDF from 'jspdf';
// declare var jsPDF: any;
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'exports-pdf';
@ViewChild('exports') exports: ElementRef;

public print(): void {

const doc = new jsPDF('p', 'pt', 'letter');

const content = this.exports.nativeElement;

const margins = {
  top: 80,
  bottom: 60,
  left: 40,
  width: 522
};
console.log(doc);
setTimeout(() => {
  doc.fromHTML(content.innerHTML, margins.left, margins.top, {}, function() {
    doc.output('export.pdf');
  }, margins);
  }, 100);
 }
}

我也试过用import * as jsPDF from 'jspdf'; or declare var jsPDF: any;

当我使用declare var jsPDF: any 时，我在控制台上拥有所有 jsPDF 属性，但是当我单击按钮时没有任何反应。当我使用import * as jsPDF from 'jspdf' 时，我有一个没有任何属性的对象，如下图：

在 angular.json 中，我将导入的脚本放入脚本中

"scripts": [ "./node_modules/jspdf/dist/jspdf.min.js", "./node_modules/jspdf/dist/jspdf.debug.js" ]

错误还在继续。

我发现其他有相同错误但没有解决方案的家伙。我不知道这是否是一个 lib 错误，或者如果使用 angular 它不能很好地工作。

我将代码上传到GitHub。

【问题讨论】：

标签： angular angular6 jspdf export-to-pdf

【解决方案1】：

从您的代码中删除我评论的内容。要导出为 pdf，您需要使用 save function doc.save("export.pdf");

app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
// import { log } from 'util'; ** REMOVE **
// import * as jsPDF from 'jspdf'; ** REMOVE **
declare var jsPDF: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'exports-pdf';
  @ViewChild('exports') exports: ElementRef;

  public print(): void {

    const doc = new jsPDF('p', 'pt', 'letter');

    const content = this.exports.nativeElement;

    const margins = {
      top: 80,
      bottom: 60,
      left: 40,
      width: 522
    };
    console.log(doc);
 //   setTimeout(() => { ** REMOVE **
      doc.fromHTML(content.innerHTML, margins.left, margins.top, {}, function () {
      //  doc.output('export.pdf'); ** REMOVE **
        doc.save("export.pdf");
      }, margins);
 //   }, 100); ** REMOVE **
  }
}

angular.json

"scripts": [
   "./node_modules/jspdf/dist/jspdf.min.js",
 //  "./node_modules/jspdf/dist/jspdf.debug.js" ** REMOVE **
 ]

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ExportsPdf</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- ** REMOVE ** <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script> -->
</head>
<body>
  <app-root></app-root>
</body>
</html>

【讨论】：

非常感谢，伙计。我尝试使用 save() 但我将这个 import * 作为 jsPDF 从 'jspdf' 导入；我已经绝望了。再次感谢您！
说jsPDF 未在控制台中定义。你能帮帮我吗？我在使用 Angular 10 时遇到了类似的问题
你有这行declare var jsPDF: any;吗？
我遇到了同样的错误。' jsPDF未定义'，有什么解决办法吗？
无法获取 pdf