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

2019年7月28日 195次阅读

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

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

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

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

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

这是我们用来捕捉Angular docs网站的命令,该网站只生成一个白色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 docs站点时,也会出现白屏失败：

~/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 docs网站的初始测试都失败了：

Error running your code. Error: Navigation Timeout Exceeded: 30000ms exceeded

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

在涉及服务器端技术时,我们主要是一个Python商店,但我们可以安装节点并运行docker容器以获得可靠运行的解决方案.

最佳答案 可能最简单的方法是使用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

点赞