Question

我们有一个Angular（v4）应用程序，它根据我们的API收到的JSON数据以及文件存储中的图像生成表单。使用该应用程序的每个客户端都有一个包含不同数据和图像的数字（数百个）。已请求一项功能，允许客户将其表单以zip格式导出为PDF格式。

我们正在探索解决方案的策略是，当收到客户端的导出请求时，服务器将加载客户端可以在无头浏览器中访问的每个表单，Angular将构建表单，然后服务器将询问浏览器生成PDF截图。然后这些PDF将被压缩并通过电子邮件或下载链接发送给客户。

我们遇到的问题是从服务器端生成Angular应用程序的屏幕截图失败。

作为一个更简单的测试网站，我们一直在努力让这些工具与当前的Angular文档网站https://angular.io/guide/quickstart一起使用。到目前为止，所有尝试都失败了：

wkhtmltopdf - 获取加载用户信息微调器，但即使等待90秒后也没有内容到达。我们在JS输出中出错。

这是我们用来捕捉Angular文档网站的命令，该网站只生成一个白色PDF：

~/render/wkhtmltox/bin$ ./wkhtmltopdf --debug-javascript --no-stop-slow-scripts --javascript-delay 90000 https://angular.io/guide/quickstart angular_quickstart.pdf 
Loading pages (1/6)
Warning: undefined:0 TypeError: setting a property that has only a getter
Counting pages (2/6)                                               
Resolving links (4/6)                                                       
Loading headers and footers (5/6)                                           
Printing pages (6/6)
Done

PhantomJS - 似乎比wkhtmltopdf好一点，因为它可以到达我们的“加载内容”微调器，这意味着应用程序知道它登录的用户。但是，即使在等待和轮询时也是如此对于DOM更改，我们在初始加载后没有得到任何更改。

使用Angular文档网站时，这也会失败并显示白屏：

~/render/phantomjs-2.1.1-linux-x86_64$ bin/phantomjs examples/rasterize.js https://angular.io/guide/quickstart angular_quickstart.pdf 
ReferenceError: Can't find variable: WeakMap

  https://angular.io/main.f0610805f4aad19da4be.bundle.js:1 in cDNt
  https://angular.io/inline.2826385ad3e299c6d1c1.bundle.js:1 in n
  https://angular.io/main.f0610805f4aad19da4be.bundle.js:1
  https://angular.io/inline.2826385ad3e299c6d1c1.bundle.js:1 in n
  https://angular.io/inline.2826385ad3e299c6d1c1.bundle.js:1 in webpackJsonp

Puppeteer - 我们还没有完全挖掘无头Chrome，但https://try-puppeteer.appspot.com/和Angular文档网站的初始测试失败了：
```
Error running your code. Error: Navigation Timeout Exceeded: 30000ms exceeded
```

有人能指出我可以截取Angular文档并从中生成PDF的工作解决方案的方向吗？希望我们能够适应该解决方案以使用我们的应用程序。请确保您的解决方案可以截取Angular 5上运行的Angular文档。

在服务器端技术方面，我们主要是Python商店，但我们可以安装节点并运行docker容器以获得可靠运行的解决方案。

Answer 1

可能最简单的方法是使用Chrome：

 chrome.exe --headless --enable-logging --disable-gpu --print-to-pdf="D:\temp\file.pdf" https://angular.io/guide/quickstart

请参阅创建PDF部分https://developers.google.com/web/updates/2017/04/headless-chrome

如何生成Angular app的服务器端PDF？

1 个答案: