无法打印包含输入字段的Html表，在angular中使用jspdf进行pdf转换

Question

这是在invoice.component.ts文件中编写的用于将表格转换为pdf的函数。当表不包含任何输入字段时，这段代码可以正常工作。

pdfCreationClick() {
var doc = new jspdf.jsPDF('p','mm','a4');   
doc.text("this is siva",15,15);
var element = document.getElementById('secondTable') as HTMLCanvasElement;
html2canvas(element).then((canvas) => {
console.log(canvas)
var imgWidth = 208;
var pageHeight = 295;
var imgData = canvas.toDataURL('image/png')
var imgHeight = canvas.height * imgWidth/canvas.width;
var heightLeft = imgHeight
doc.addImage(imgData, 'PNG',0,0,208,imgHeight)
var position =0;
doc.save('first.pdf');
})
}

这是在html页面即invoice.component.html中编写的代码我曾试图将表单标签保留在表格标签的位置。即使我也不能打印表，当它包含输入字段。

<table id="secondTable">
<div class='container' id="rateID">
<div class='form_row' *ngFor= "let obj of dataarray;let i = index" id="form_row">
<div class="row">
<div class='inline' id='sno'>                
<input class='sno' type='text' name='name' value={{i+1}}>
</div>            
<div class='inline'>                            
<input type='text' name='salary{{i}}' [(ngModel)]=obj.product>
</div>            
<div class='inline'>                            
<input type='text' name='age{{i}}' [(ngModel)]=obj.description>
</div>            
<div class='inline'>                            
<input type='text' name='quantity{{i}}' [(ngModel)]=obj.quantity>
</div>
<div class='inline'>                            
<input type='text' name='rate{{i}}' (change)='totalAmountChange()' [(ngModel)]=obj.rate>
</div>
<div class='inline'>                            
<input type='text' name='amount{{i}}'  [(ngModel)]=obj.rate*obj.quantity>
</div>
<div class='inline'>                            
<input type='text' name='tax{{i}}' [(ngModel)]=obj.tax>
</div>
<div class='inline'>                            
<button class="table_button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg></button>
</div>                        
</div>
</div>
</div>
</table>
<button (click)='pdfCreationClick()'>Save and Send</button>

这是包含输入字段的HTML内容，所以在输入字段中输入数据后，如果我们点击保存，它需要转换为pdf页面，该页面必须包含我所提供的数据表。

请帮帮我。我找不到答案，三天了。

本JSPDF之外的任何建议也鼓励

这里的问题不是点击事件。主要问题是，当表格包含输入标签时，输入标签中的数据不会以pdf格式打印。

Answer 1

在您的保存按钮中添加一个on click事件来调用您的pdf creator函数，即

<button class="table_button" (click)="pdfCreationClick()">
...
</button>