gpt4 book ai didi

angular - doc.fromHTML 不是 angular 6 的函数

转载 作者:行者123 更新时间:2023-12-03 13:39:22 25 4
gpt4 key购买 nike

我想将模板 html 导出为 pdf,我正在尝试使用带有 angular 的 jsPDF lib,但出现此错误 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 属性,但是当我单击按钮时没有任何 react 。当我使用 import * as jsPDF from 'jspdf'我有一个没有任何属性的对象,如这张图片:
object without any properties

在 angular.json 中,我在脚本中放入了导入
"scripts": [
"./node_modules/jspdf/dist/jspdf.min.js",
"./node_modules/jspdf/dist/jspdf.debug.js"
]

并且错误还在继续。

我发现其他人有同样的错误,但没有解决方案。我不知道这是一个 lib 错误还是 angular 不能很好地工作。

我把代码上传到 GitHub .

最佳答案

删除我从您的代码中评论的内容。要导出为 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>

关于angular - doc.fromHTML 不是 angular 6 的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53972144/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com