如何使用 Angular 视图中的内容创建 PDF？
Posted
技术标签:
【中文标题】如何使用 Angular 视图中的内容创建 PDF？【英文标题】：How to create PDF with contents from an Angular view? 【发布时间】：2020-02-18 16:07:15 【问题描述】：我有一个 Angular 应用程序，它使用 ngx-charts 来呈现一些图形，例如：
现在我想将此视图及其图表导出为 PDF 文件，但目前我不确定如何解决这个问题。
有没有办法将此视图的 html 导出为 PDF，或者是否有其他方法可以基于视图生成 PDF 文件？
附加问题：假设我必须在没有用户交互的情况下渲染视图并生成 PDF 后端，您将如何处理？
【问题讨论】：
***.com/questions/53388758/… 试试这个。 @aviboy2006 谢谢，所以基本上这样做的方法是：首先将视图作为屏幕截图捕获到画布，然后将画布转换为PDF，我的理解是否正确？ 可以使用jsPDF和dom镜像包导出id='dashboard'的html div 我会试一试的！谢谢！ @aviboy2006 同时，在我的主题中添加了一个额外的问题，与如何在没有用户交互的情况下基于视图生成此类 PDF 相关，因此在服务器上的异步工作进程中。我想我必须为此采取不同的方法。 【参考方案1】：到目前为止，您使用这个库的机会最大：jsPDF
或者你可以尝试从这段代码中做一些事情：
print()
var canvas = document.getElementById(id) as HTMLCanvasElement;
var dataURL = canvas.toDataURL();
let popupWin,printContents;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>$title</title>
<style>
</style>
</head>
<body height"="100%" onload="window.print();window.close()"><img src="$dataURL" ></body>
</html>`
);
popupWin.document.close();
简而言之，创建一个画布并将其打印出来（并保存为 pdf）
【讨论】：
以上是关于如何使用 Angular 视图中的内容创建 PDF？的主要内容，如果未能解决你的问题，请参考以下文章
如何修复 Angular 中的此错误并将数据输出到 PDF？
如何根据 JWT 令牌中的属性更改前端（Angular）视图上显示的内容？
如何从 angular2 RC5 中的 API 下载 PDF？