How to create a server-side PDF file of an Angular application?

We have an Angular (v4) application that generates a form from the JSON data received by our API, in combination with images from a file vault. Each client using the application has a number (in hundreds) of forms containing different data and images. A feature was requested that allows the client to export their forms as PDF files in a zip file.

The strategy we are exploring for the solution is that upon receiving an export request for the client, the server downloads every form that the client can access in a mute browser, Angular will create the form, and then the server will ask the browser to create a PDF screenshot. Then these PDF files will be protected and sent to the client by e-mail or download link.

The problem we are facing is that the server side screenshot of the Angular application failed.

As a simpler test site, we also tried to get any of these tools to work with the current Angular documentation site - https://angular.io/guide/quickstart . All attempts failed:

  • wkhtmltopdf- Receives our spinner user information download, but the content does not come even after waiting 90 seconds. We get errors in the JS output.

    This is the command we used to bind the Angular docs site, which simply generates a white 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, Angular 5.

Python, , node .

+4
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

+1

Source: https://habr.com/ru/post/1688803/


All Articles