Question

我正在尝试将动态表数据导出到Excel，PDF和打印中。但是无法了解使用哪个角材料和npm插件将表数据导出为PDF并带有“打印”选项。您能否提出建议和帮助来完成此问题？

我能够将数据导出为Excel，但不能导出为PDF，并且仍在寻找打印功能。

Answer 1

有关将表导出到Excel的信息，请参见this

对于打印，您可以在ts中使用javascript代码：这适用于反应形式“ this.formName.getValue（）” 但是如果您使用传统方式您只需要将formvalue传递给变量“ a” 其余的您可以在document.write(${a.name})

中获得价值

print(formValue){
        let popupWin;
        let a: type = JSON.parse(JSON.stringify(formValue));
        popupWin = window.open('', '_blank', 
         'top=0,left=0,height=100%,width=auto,toolbar=no,titlebar=no');
        popupWin.document.open();
        popupWin.document.write(`<html> <head>
</head><body onload="window.print();window.close()">
 heya !! ${{ a }}
</body> `)
}

您可以在HTML中使用打字稿代码。

Answer 2

public generatePDF()
{
    var data = document.getElementById('contentToConvert');
    html2canvas(data).then(canvas => {
        // Few necessary setting options
        var imgWidth = 208;
        var pageHeight = 295;
        var imgHeight = canvas.height * imgWidth / canvas.width;
        var heightLeft = imgHeight;

        const contentDataURL = canvas.toDataURL('image/png')
        let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
        var position = 0;
        pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
        pdf.save('MYPdf.pdf'); // Generated PDF
    });
}

通过使用以上功能，我们可以将表格数据转换为pdf。并将ID传递给您的表格。 ....

Answer 3

如果您使用Mat-Table来存储数据，那么以下内容绝对可以为您提供帮助：注意：在按钮上单击downloadPdf（）将起作用。

z = data[79,46.86,10,181.3,120.5,277.1]
cmap = mpl.cm.get_cmap('RdYlBu')
normalize = mpl.colors.Normalize(vmin=400, vmax=800)
colors = [cmap(normalize(value)) for value in z]
ax.scatter(0, 0, color=colors)

ellipse1 = mp.patches.Ellipse(xy=(0,0), width=5, height=10,
  angle = 45, edgecolor="r", linewidth=3, facecolor='none')

Answer 4

谢谢，我能够从HTML表中打印数据。通过我传递的ID，在您的.ts文件中使用以下代码。

print(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
  <html>
    <head>
      <title>Print tab</title>
      <style>
      //........Customized style.......
      </style>
    </head>
<body onload="window.print();window.close()">${printContents}</body>
  </html>`
    );
    popupWin.document.close();
}

如何在Angular 7中将表数据导出为PDF和打印功能？

4 个答案: