如何生成 Angular 应用程序的服务器端 PDF？

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