jsreport recipe which renders pdf from html using electron
Adds recipe electron-pdf to jsreport, which render pdf from html using electron.
electron-pdf recipe is capable of rendering any html and javascript you provide. This means you can also use external javascript libraries or canvas to print visual charts.
npm install jsreport-electron-pdf --save
npm install electron --save
Linux servers requires to run jsreport with this recipe through xvfb. You can find an example how to do it here. Note that electron-pdf is also included in the jsreport full docker image which can simplify the installation on linux targets.
If you use jsreport-core, you can apply this extension manually and pass configuration to it directly:
var jsreport = require('jsreport-core')();
jsreport.use(require('jsreport-electron-pdf')({ strategy: 'electron-ipc' }));Use electron-pdf key in the standard jsreport config file.
Available options:
"extensions": {
"electron-pdf": {
/* use rather dedicated process for every generation,
dedicated-process strategy is quite slower but can solve some bugs
with corporate proxy, set to 'electron-server' for maximum performance.
possible values: 'dedicated-process', 'electron-ipc' or 'electron-server', defaults to 'dedicated-process' */
"strategy": "electron-ipc",
/* number of allocated electron processes (when using electron-server strategy) */
"numberOfWorkers": 2,
/* time in ms to wait for worker ping response in order to be considered alive when using `electron-server` or `electron-ipc` strategy */
"pingTimeout": 100,
/* timeout in ms for pdf generation, when the timeout is reached, the conversion is cancelled */
"timeout": 5000,
/* optional port range where to start electron server (when using electron-server strategy) */
"portLeftBoundary": 1000,
"portRightBoundary": 2000,
/* optional hostname where to start electron server when using electron-server strategy) */
"host": '127.0.0.1',
/* optional chrome command line switches for electron process, see https://electron.atom.io/docs/api/chrome-command-line-switches/ for details. */
"chromeComandLineSwitches": {
'disable-http-cache': null
},
/* set to true to allow requests using the file protocol (file:///). defaults to false */
"allowLocalFilesAccess": false,
/* the collected console.log, console.error, console.warn messages are trimmed by default */
"maxLogEntrySize": 1000
}
}electron-pdf recipe uses electron's printToPDF feature to generate PDF from a web page, so basically most options are the same as electron's printoToPDF options.
Available settings for pdf generation:
marginsTypeNumber - specify the type of margins to use in PDF.0- default1- none2- minimum
landscapeBoolean -truefor landscape,falsefor portrait.formatString - predefined page sizes or Object - { width, height } in microns.A4A3LegalLetterTabloidObject|JSON Object String. Keys: width, height. Values: integer in microns (micrometers) (1/1000mm)- e.g. A5:
"{ 'width': 148000, 'height': 210000 }"
- e.g. A5:
printBackgroundBoolean - whether to print CSS backgrounds or not.widthNumber - width (px) of the web page (BrowserWindow) that would be used to generate the PDF.heightNumber - height (px) of the web page (BrowserWindow) that would be used to generate the PDF.printDelayNumber - delay between rendering a page and printing into pdf, this is useful when printing animated content like charts, or you can usewaitForJSoption.blockJavaScriptBoolean - whether to disable javascript execution in page or not.waitForJSBoolean - if it is set totruethe PDF generation will wait until you setwindow.JSREPORT_READY_TO_STARTto true in your page.
Css contains styles like page-break-before you can use to specify html page breaks. This can be used as well with electron-pdf to specify page breaks inside pdf files.
<h1>Hello from Page 1</h1>
<div style='page-break-before: always;'></div>
<h1>Hello from Page 2</h1>
<div style="page-break-before: always;"></div>
<h1>Hello from Page 3</h1>Attach a header and footer to PDF is not currently supported :(, unlike phantomjs, electron does not provide a way to attach a header/footer to the final PDF.
You may need to postpone pdf printing until some javascript async tasks are processed. If this is your case set the waitForJS: true option in the API or Wait for printing trigger in the studio menu. Then the printing won't start until you set window.JSREPORT_READY_TO_START=true inside your template's javascript.
...
<script>
// do some calculations or something async
setTimeout(function() {
window.JSREPORT_READY_TO_START = true; // this will start the pdf printing
}, 500);
...
</script>Using a responsive css framework for printing pdf may not be the best idea. However it still works. Only thing you need to keep in mind is that output pdf typically won't look the same as html because bootstrap includes different printing styles under @media print.
If you are using a machine with a single-core processor you will probably experience a high CPU usage when doing any rendering (97% in most cases and the usage is worse when using Windows), this is because a limitation in electron when it is being used on single core machines, unfortunately the only way to overcome this is to upgrade your machine to a processor with more cores (a processor with two cores is fine). more info: issue1, issue2
See electron-html-to for more troubleshooting
See license
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent