คำเตือน Angular- jsPDF, tocken ที่ไม่คาดคิดและ jsPDF.fromHTML ไม่ใช่ฟังก์ชัน
ฉันต้องการพิมพ์โค้ด html เล็กน้อย jsPDF ใน Angular แต่ฉันทำไม่ได้ ฉันต้องการความช่วยเหลือดูสิ
ts.config.app.json
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
"allowSyntheticDefaultImports": true
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
โมดูล npm jspdf
ป้อนคำอธิบายภาพที่นี่
สคริปต์ angular.json
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/jspdf/dist/jspdf.es.min.js"
]
ถ้าในคลาสฉันนำเข้าแบบนี้import jsPDF from 'jspdf';
หรือแบบนี้import { jsPDF } from "jspdf";
ฉันได้รับคำเตือนนี้และข้อผิดพลาดนี้
คำเตือน:
WARNING in ./node_modules/jspdf/dist/jspdf.umd.min.js 195:141-151
Critical dependency: the request of a dependency is an expression
WARNING in ./node_modules/jspdf/dist/jspdf.umd.min.js 195:240-254
Critical dependency: the request of a dependency is an expression
ข้อผิดพลาด:
scripts.js:18390 Uncaught SyntaxError: Unexpected token 'export'
หากฉันนำเข้า jspdf เช่นนี้import * as jsPDF from "jspdf";
ฉันได้รับข้อผิดพลาดนี้:
ข้อผิดพลาด:
Type 'typeof import("jspdf")' has no construct signatures.
const doc = new jsPDF('p', 'pt', 'letter');
นี่คือชั้นเรียนของฉัน:
//PDF
// import { jsPDF } from "jspdf";
import jsPDF from 'jspdf';
// import * as jsPDF from "jspdf";
@Component({
selector: 'app-cash-register',
templateUrl: './cash-register.component.html'
})
export class CashRegisterComponent implements OnInit {
@ViewChild("ticket") ticket: ElementRef;
public printPDF(): void {
var pdf = this.ticket.nativeElement.innerHTML;
const doc = new jsPDF('p', 'pt', 'letter');
const margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
doc.html(pdf, {
callback: function(doc) {
doc.save("Test1.pdf");
}
})
// or
doc.fromHTML(pdf, margins.left, margins.top, {}, function () {
doc.save("Test2.pdf");
}, margins);
}
}
และถ้าฉันไม่นำเข้า jspdf ใน angular.json ฉันได้รับข้อผิดพลาดนี้เมื่อฉันพยายามดาวน์โหลด:
core.js:4197 ERROR TypeError: doc.fromHTML is not a function
คำตอบ
ฉันไม่มีทางออกที่ดี แต่นี่คือวิธีที่ฉันทำให้มันได้ผล ดูเหมือนว่า jspdf 2.0.0 จะโยน "doc.fromHTML ไม่ใช่ฟังก์ชัน" ในเชิงมุม 10 (ฉันไม่แน่ใจว่ามันใช้งานได้ในเวอร์ชันเชิงมุมก่อนหน้านี้หรือไม่)
ฉันลบ jsdpf 2.0.0 โดยใช้ไฟล์
npm uninstall jspdf
จากนั้นฉันติดตั้งเวอร์ชันก่อนหน้าซึ่งก็คือ:
npm install [email protected]
ตัวอย่างการทำงาน:
import * as jsPDF from 'jspdf';
var doc = new jsPDF('p', 'pt', 'letter');
var imgData =
'data:image/png;base64,addAnImageData';
var specialElementHandlers = {
'#idDiv': function (element, renderer) {
return true;
}
};
doc.addImage(imgData, 'png', 0, 250, 615, 200);
let source = document.getElementById("idDiv");
doc.fromHTML(source, 0, 0, {
'elementHandlers': specialElementHandlers
});
doc.save('card.pdf');
doc.fromHTML()
ปัญหาที่เกิดขึ้นใน 7.x เชิงมุมเกินไป หากดาวน์เกรดเป็น jsPDF 1.5.3 จะสามารถทำงานได้อย่างถูกต้อง