JSPDF在角度问题中创建PDF

Question

在本地使用ng server可以很好地创建pdf，但我在服务器上得到以下错误。有人能帮忙吗?我试过修改代码，但运气不好。下面我也有一个代码示例。当我在没有jspdf调用的服务器上运行应用程序时，网站工作正常，但添加这个会导致以下错误。它与jspdf调用有关。

ERROR Error: Uncaught (in promise): [object Undefined]
at resolvePromise (main.js:14845
1:21)
at main.js:148346:11
at main.js:148363:27
at main.js:275791:24
at main.js
:147457:160)
at Object.onInvoke (main.js:2277
67:25)
at _ZoneDelegate.invoke (main.js
:147457:48)
at Zone.run (main.js:147183:37) 
at main.js:148524:28
at _ZoneDelegate.invokeTask (mai
n.js:147490:173) {
rejection: undefined,
promise: ZoneAwarePromise [Promise] {
__zone_symbol__state: 0,
__zone_symbol__value: undefined
},
_name: 'angular',
_properties: { isAngularZone: true },
_zoneDelegate: <ref *2> _ZoneDelegate {
_taskCounts: [Object],
zone: [Circular *1],
_parentDelegate: [_ZoneDelegate],
_forkZS: null,
_forkDlgt: null,
_forkCurrZone: null,
_interceptZS: null,
_interceptDlgt: null,
_interceptCurrZone: null,
_invokeZS: [Object],
_invokeDlgt: [_ZoneDelegate],
_invokeCurrZone: [Circular *1],
_handleErrorZS: [Object],
_handleErrorDlgt: [_ZoneDelegate],
_handleErrorCurrZone: [Circular *1],
_scheduleTaskZS: [Object],
_scheduleTaskDlgt: [_ZoneDelegate],
_scheduleTaskCurrZone: [Circular *1],
_invokeTaskZS: [Object],
_invokeTaskDlgt: [_ZoneDelegate],
_invokeTaskCurrZone: [Circular *1],
_cancelTaskZS: [Object],
_cancelTaskDlgt: [_ZoneDelegate],
_cancelTaskCurrZone: [Circular *1],
_hasTaskZS: [Object],
_hasTaskDlgt: [_ZoneDelegate],
_hasTaskDlgtOwner: [Circular *2],
_hasTaskCurrZone: [Circular *1]
}
},
task: ZoneTask {
_zone: <ref *1> Zone {
_parent: [Zone],
_name: 'angular',
_properties: [Object],
_zoneDelegate: [_ZoneDelegate]
},
runCount: 0,
_zoneDelegates: null,
_state: 'notScheduled',
type: 'microTask',
source: 'Promise.then',
data: ZoneAwarePromise [Promise] {
__zone_symbol__state: true,
__zone_symbol__value: undefined
},
scheduleFn: undefined,
cancelFn: undefined,
callback: [Function (anonymous)],
invoke: [Function (anonymous)]
}
}

我尝试了下面的代码，没有任何运气。谁来看看。在angular中有没有更好的方法来创建pdf ?我将非常感谢任何帮助

let doc = new jsPDF({hotfixes: ["px_scaling"], unit: "pt"})
doc.html(this.pdfHtml, {
html2canvas: {
scale: 1,
},
callback: function (doc) {
doc.save(`Ti_Summary.pdf`, {returnPromise: true}).then(response => {
console.log('Document Downloaded')
}).catch(err => {
console.log(err)
})
},
x: 0,
y: 0,
})

Answer 1

——:角11/12:-

在项目中安装库:-

npm install jspdf --save

现在，创建一个可以绑定到HTML元素(div)的元素引用。

您的组件.ts文件(example.component.ts)应该看起来像:-

import { jsPDF } from "jspdf";
import html2canvas from 'html2canvas';
export class ExampleComponent { 
@ViewChild('myTemp') myTempRef: ElementRef;
print(){
const DATA = this.myTempRef.nativeElement;
html2canvas(DATA).then(canvas => {        
let fileWidth = 200;
let fileHeight = canvas.height * fileWidth / canvas.width;

const FILEURI = canvas.toDataURL('image/png')
let PDF = new jsPDF('p', 'mm', 'a4');
let position = 0;
PDF.addImage(FILEURI, 'PNG', 5, 5, fileWidth, fileHeight)      
PDF.save('angular-demo.pdf');
});   
}
}

现在，.html文件必须绑定模板引用'myTempRef'。

你的Component .html文件(example.component.html)应该看起来像:-

<div #myTemp>
// other code here
<button (click)="print()"></button>
</div>