如何在Angular 7中导出表数据为PDF和打印功能？
如何在Angular 7中导出表数据为PDF和打印功能？
提问于 2019-04-25 22:19:35
我正在尝试将我的动态表数据导出到Excel、PDF和打印。但不能理解使用哪些角度材料和npm插件将表格数据导出为PDF并使用选项打印。你能给我一些建议和帮助来完成这个问题吗？
我可以将数据导出为Excel，但不能导出为PDF，并且仍在寻找打印功能。
回答 4
Stack Overflow用户
发布于 2019-04-26 17:49:22
谢谢你，我可以打印的数据从HTML表。在你的.ts文件中使用下面的代码，在我传递的时候传递id。
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();
}Stack Overflow用户
发布于 2019-04-25 23:34:43
要将表格导出到Excel中，可以参考this
对于打印，您可以在ts中使用javascript代码:这适用于反应式表单"this.formName.getValue()“，但如果您使用的是传统方法，则只需将formvalue传递给变量"a”rest，您就可以在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中使用typescript代码。
Stack Overflow用户
发布于 2019-04-26 14:29:49
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传递给您的表。……
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55851523
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号