doc.fromHTML不是角度为6的函数 [英] doc.fromHTML is not a function with angular 6
问题描述
我想将模板html导出为pdf,并且尝试使用Angular的jsPDF lib,但是得到了这个错误文档.fromHTML不是函数.
I wanna export a template html to pdf and I'm trying use jsPDF lib with angular, but o got this error 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'
时,我有一个没有任何属性的对象,如下图所示:
when I use declare var jsPDF: any
, I have at the console all jsPDF properties, but nothing happen when I click on button. When I use import * as jsPDF from 'jspdf'
i have an object without any properties like this image:
在angular.json中,我在脚本中输入了导入内容
In angular.json i put in scripts the imports
"scripts": [
"./node_modules/jspdf/dist/jspdf.min.js",
"./node_modules/jspdf/dist/jspdf.debug.js"
]
"scripts": [
"./node_modules/jspdf/dist/jspdf.min.js",
"./node_modules/jspdf/dist/jspdf.debug.js"
]
错误继续发生.
我发现其他具有相同错误但没有解决方案的家伙.我不知道这是不是lib bug还是角度不好用.
I found other dudes with the same error but without solution. I don't know if it is a lib bug or if with angular it not work very well.
我将代码上传到 GitHub .
推荐答案
从您的代码中删除我的评论.要将其导出为pdf文件,您需要使用save function
doc.save("export.pdf");
Remove what I commented from your code. To export as pdf you need to use 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>
这篇关于doc.fromHTML不是角度为6的函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!