From 6fe50dc040adf5492d529759adaf0527ad6747ba Mon Sep 17 00:00:00 2001 From: Joan Sanchez Date: Thu, 2 Jul 2020 16:07:26 +0200 Subject: [PATCH 1/4] Switch to puppeteer --- print/common/css/layout.css | 18 +++++++--- print/common/css/report.css | 6 ++-- print/config/print.json | 12 ++++--- .../report-footer/assets/css/style.css | 20 ++++++++--- .../components/report-footer/locale/en.yml | 2 +- .../components/report-footer/locale/es.yml | 2 +- .../components/report-footer/locale/fr.yml | 2 +- .../components/report-footer/locale/pt.yml | 2 +- .../report-footer/report-footer.html | 20 ++++++----- .../report-header/assets/css/style.css | 2 +- print/core/report.js | 33 ++++++++++++++++--- print/methods/report.js | 3 +- .../campaign-metrics/campaign-metrics.html | 20 ++++------- .../claim-pickup-order.html | 20 ++++------- .../reports/delivery-note/delivery-note.html | 28 ++++++---------- .../reports/driver-route/driver-route.html | 18 +++------- .../reports/entry-order/entry-order.html | 26 +++++---------- .../templates/reports/item-label/options.json | 11 ++++--- .../reports/letter-debtor/letter-debtor.html | 29 +++++++--------- print/templates/reports/receipt/receipt.html | 20 ++++------- .../reports/sepa-core/sepa-core.html | 20 ++++------- 21 files changed, 153 insertions(+), 161 deletions(-) diff --git a/print/common/css/layout.css b/print/common/css/layout.css index b85589a81..3768fb8ea 100644 --- a/print/common/css/layout.css +++ b/print/common/css/layout.css @@ -157,22 +157,32 @@ table { border-spacing: 0; } +thead { + display: table-header-group +} + /** * Prevent page break fix */ tbody { page-break-inside: avoid; break-inside: avoid; - display: block; - width: 100% + display: block } -thead, tbody tr { +tbody tr { table-layout: fixed; - display: table; + display: table +} + +thead, tbody, tbody tr { width: 100%; } +tfoot { + display: block +} + .row-oriented, .column-oriented { text-align: left; width: 100% diff --git a/print/common/css/report.css b/print/common/css/report.css index 5b8a1539b..796b99c4f 100644 --- a/print/common/css/report.css +++ b/print/common/css/report.css @@ -3,12 +3,12 @@ * */ body { - zoom: 0.53 + zoom: 0.70; } .title { margin-bottom: 20px; font-weight: 100; - margin-top: 0; - font-size: 2em + font-size: 2em; + margin-top: 0 } \ No newline at end of file diff --git a/print/config/print.json b/print/config/print.json index e1a93e152..5f4c0f7b8 100755 --- a/print/config/print.json +++ b/print/config/print.json @@ -13,10 +13,14 @@ }, "pdf": { "format": "A4", - "border": "1.5cm", - "footer": { - "height": "55px" - } + "margin": { + "top": "1.5cm", + "right": "1.5cm", + "bottom": "3cm", + "left": "1.5cm" + }, + "displayHeaderFooter": true, + "printBackground": true }, "mysql": { "host": "localhost", diff --git a/print/core/components/report-footer/assets/css/style.css b/print/core/components/report-footer/assets/css/style.css index e7ee162a8..e06e8c0ad 100644 --- a/print/core/components/report-footer/assets/css/style.css +++ b/print/core/components/report-footer/assets/css/style.css @@ -1,11 +1,13 @@ -footer { +.footer { font-family: "Roboto", "Helvetica", "Arial", sans-serif; - font-size: 0.55em; + margin-left: 2cm; + margin-right: 2cm; + font-size: 10px; color: #555; zoom: 0.65 } -footer, footer p { +.footer p { text-align: center } @@ -13,12 +15,20 @@ p.privacy { font-size: 0.8em } -footer .page { +.footer .page { border-bottom: 2px solid #CCC; padding-bottom: 2px } -footer .page > section { +.page .centerText { + text-align: center +} + +.page .pageCount { + text-align: right +} + +.footer .page > div { display: inline-block; width: 33% } \ No newline at end of file diff --git a/print/core/components/report-footer/locale/en.yml b/print/core/components/report-footer/locale/en.yml index 404c7e7a4..3899f8b98 100644 --- a/print/core/components/report-footer/locale/en.yml +++ b/print/core/components/report-footer/locale/en.yml @@ -1,4 +1,4 @@ -numPages: Page {{page}} of {{pages}} +numPages: Page of law: privacy: 'In compliance with the provisions of Organic Law 15/1999, on the Protection of Personal Data, we inform you that the personal data you provide diff --git a/print/core/components/report-footer/locale/es.yml b/print/core/components/report-footer/locale/es.yml index 39dae8b58..985c1e17a 100644 --- a/print/core/components/report-footer/locale/es.yml +++ b/print/core/components/report-footer/locale/es.yml @@ -1,4 +1,4 @@ -numPages: Página {{page}} de {{pages}} +numPages: Página de law: privacy: En cumplimiento de lo dispuesto en la Ley Orgánica 15/1999, de Protección de Datos de Carácter Personal, le comunicamos que los datos personales que facilite diff --git a/print/core/components/report-footer/locale/fr.yml b/print/core/components/report-footer/locale/fr.yml index 8f2543640..861ee5684 100644 --- a/print/core/components/report-footer/locale/fr.yml +++ b/print/core/components/report-footer/locale/fr.yml @@ -1,4 +1,4 @@ -numPages: Page {{page}} de {{pages}} +numPages: Page de law: privacy: Conformément aux dispositions de la loi organique 15/1999 sur la protection des données personnelles, nous vous informons que les données personnelles que diff --git a/print/core/components/report-footer/locale/pt.yml b/print/core/components/report-footer/locale/pt.yml index 8b4987bb7..1c343bb4c 100644 --- a/print/core/components/report-footer/locale/pt.yml +++ b/print/core/components/report-footer/locale/pt.yml @@ -1,4 +1,4 @@ -numPages: Página {{page}} de {{pages}} +numPages: Página de law: privacy: Em cumprimento do disposto na lei Orgânica 15/1999, de Protecção de Dados de Carácter Pessoal, comunicamos que os dados pessoais que facilite se incluirão diff --git a/print/core/components/report-footer/report-footer.html b/print/core/components/report-footer/report-footer.html index 4e0b7e327..85395559b 100644 --- a/print/core/components/report-footer/report-footer.html +++ b/print/core/components/report-footer/report-footer.html @@ -1,9 +1,11 @@ - +
+ +
diff --git a/print/core/components/report-header/assets/css/style.css b/print/core/components/report-header/assets/css/style.css index cb8cd55c0..3ce75e792 100644 --- a/print/core/components/report-header/assets/css/style.css +++ b/print/core/components/report-header/assets/css/style.css @@ -4,7 +4,7 @@ header { padding-bottom: 10px; margin-bottom: 20px; text-align: center; - font-size: 0.55em; + font-size: 12px; color: #555 } diff --git a/print/core/report.js b/print/core/report.js index db4c9f427..dd305cc89 100644 --- a/print/core/report.js +++ b/print/core/report.js @@ -1,5 +1,6 @@ const fs = require('fs'); -const pdf = require('html-pdf'); +// const pdf = require('html-pdf'); +const puppeteer = require('puppeteer'); const path = require('path'); const config = require('./config'); const Component = require('./component'); @@ -20,18 +21,42 @@ class Report extends Component { async toPdfStream() { const template = await this.render(); - let options = config.pdf; + let options = Object.assign({}, config.pdf); const optionsPath = `${this.path}/options.json`; const fullPath = path.resolve(__dirname, optionsPath); if (fs.existsSync(fullPath)) options = Object.assign(options, require(optionsPath)); - return new Promise(resolve => { + /* return new Promise(resolve => { pdf.create(template, options).toStream((err, stream) => { resolve(stream); }); - }); + }); */ + + const browser = await puppeteer.launch({headless: true}); + const page = await browser.newPage(); + await page.setContent(template); + + const element = await page.$('#pageFooter'); + + let footer = ''; + if (element) { + footer = await page.evaluate(el => { + const html = el.innerHTML; + el.remove(); + return html; + }, element); + } + + options.headerTemplate = '\n'; + options.footerTemplate = footer; + + console.log(options); + const buffer = await page.pdf(options); + await browser.close(); + + return buffer; } } diff --git a/print/methods/report.js b/print/methods/report.js index 348c05ff3..41b09ed05 100644 --- a/print/methods/report.js +++ b/print/methods/report.js @@ -11,7 +11,8 @@ module.exports = app => { res.setHeader('Content-type', 'application/pdf'); res.setHeader('Content-Disposition', `inline; filename="${fileName}"`); - stream.pipe(res); + //stream.pipe(res); + res.end(stream); } catch (error) { next(error); } diff --git a/print/templates/reports/campaign-metrics/campaign-metrics.html b/print/templates/reports/campaign-metrics/campaign-metrics.html index d125ab7e2..536c7c5d2 100644 --- a/print/templates/reports/campaign-metrics/campaign-metrics.html +++ b/print/templates/reports/campaign-metrics/campaign-metrics.html @@ -6,11 +6,7 @@ -
-
- -
-
+
@@ -93,15 +89,11 @@
-
-
- - -
-
+ + diff --git a/print/templates/reports/claim-pickup-order/claim-pickup-order.html b/print/templates/reports/claim-pickup-order/claim-pickup-order.html index 59647cf9a..2fdea5291 100644 --- a/print/templates/reports/claim-pickup-order/claim-pickup-order.html +++ b/print/templates/reports/claim-pickup-order/claim-pickup-order.html @@ -6,11 +6,7 @@ -
-
- -
-
+
@@ -85,15 +81,11 @@
-
-
- - -
-
+ + diff --git a/print/templates/reports/delivery-note/delivery-note.html b/print/templates/reports/delivery-note/delivery-note.html index 913946196..5c8dac8eb 100644 --- a/print/templates/reports/delivery-note/delivery-note.html +++ b/print/templates/reports/delivery-note/delivery-note.html @@ -6,13 +6,9 @@ -
-
- - -
-
+ +
@@ -241,17 +237,13 @@
-
-
- - -
-
+ + diff --git a/print/templates/reports/driver-route/driver-route.html b/print/templates/reports/driver-route/driver-route.html index 919ed0679..549aac060 100644 --- a/print/templates/reports/driver-route/driver-route.html +++ b/print/templates/reports/driver-route/driver-route.html @@ -6,11 +6,7 @@ -
-
- -
-
+
@@ -154,14 +150,10 @@
-
-
- - -
-
+ + diff --git a/print/templates/reports/entry-order/entry-order.html b/print/templates/reports/entry-order/entry-order.html index 3c1cdbd33..cb69ecee9 100644 --- a/print/templates/reports/entry-order/entry-order.html +++ b/print/templates/reports/entry-order/entry-order.html @@ -6,13 +6,9 @@ -
-
- - -
-
+ +
@@ -126,16 +122,12 @@
-
-
- - -
-
+ + diff --git a/print/templates/reports/item-label/options.json b/print/templates/reports/item-label/options.json index 6b00b0443..1cc4e1529 100644 --- a/print/templates/reports/item-label/options.json +++ b/print/templates/reports/item-label/options.json @@ -1,10 +1,11 @@ { - "format": "A4", - "orientation": "landscape", + "landscape": true, "width": "10.4cm", "height": "4.8cm", - "border": "0cm", - "footer": { - "height": "0" + "margin": { + "top": "0cm", + "right": "0cm", + "bottom": "0cm", + "left": "0cm" } } \ No newline at end of file diff --git a/print/templates/reports/letter-debtor/letter-debtor.html b/print/templates/reports/letter-debtor/letter-debtor.html index 81a001765..88bf15bdb 100644 --- a/print/templates/reports/letter-debtor/letter-debtor.html +++ b/print/templates/reports/letter-debtor/letter-debtor.html @@ -6,11 +6,7 @@ -
-
- -
-
+
@@ -74,24 +70,23 @@ - Total {{getTotalDebtOut()}} - {{getTotalDebtIn()}} - {{totalBalance}} + + Total + {{getTotalDebtOut() | currency('EUR', $i18n.locale)}} + + {{getTotalDebtIn() | currency('EUR', $i18n.locale)}} + {{totalBalance | currency('EUR', $i18n.locale)}}
-
-
- - -
-
+ + diff --git a/print/templates/reports/receipt/receipt.html b/print/templates/reports/receipt/receipt.html index 9a4e1964c..3371e6871 100644 --- a/print/templates/reports/receipt/receipt.html +++ b/print/templates/reports/receipt/receipt.html @@ -6,11 +6,7 @@ -
-
- -
-
+
@@ -36,15 +32,11 @@
-
-
- - -
-
+ + diff --git a/print/templates/reports/sepa-core/sepa-core.html b/print/templates/reports/sepa-core/sepa-core.html index d14a3ce6e..300cf976f 100644 --- a/print/templates/reports/sepa-core/sepa-core.html +++ b/print/templates/reports/sepa-core/sepa-core.html @@ -6,11 +6,7 @@ -
-
- -
-
+
@@ -166,15 +162,11 @@
-
-
- - -
-
+ + From c6dc1b6b23d9fdc893e3fa094614bbd7fe8d94c4 Mon Sep 17 00:00:00 2001 From: Joan Sanchez Date: Mon, 6 Jul 2020 08:27:05 +0200 Subject: [PATCH 2/4] Label report fixes & report options are not longer shared --- print/core/report.js | 14 ++++---------- print/templates/reports/item-label/options.json | 4 ++-- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/print/core/report.js b/print/core/report.js index dd305cc89..ea6a360b5 100644 --- a/print/core/report.js +++ b/print/core/report.js @@ -21,18 +21,13 @@ class Report extends Component { async toPdfStream() { const template = await this.render(); - let options = Object.assign({}, config.pdf); + const defaultOptions = Object.assign({}, config.pdf); const optionsPath = `${this.path}/options.json`; const fullPath = path.resolve(__dirname, optionsPath); + let options = defaultOptions; if (fs.existsSync(fullPath)) - options = Object.assign(options, require(optionsPath)); - - /* return new Promise(resolve => { - pdf.create(template, options).toStream((err, stream) => { - resolve(stream); - }); - }); */ + options = require(optionsPath); const browser = await puppeteer.launch({headless: true}); const page = await browser.newPage(); @@ -40,7 +35,7 @@ class Report extends Component { const element = await page.$('#pageFooter'); - let footer = ''; + let footer = '\n'; if (element) { footer = await page.evaluate(el => { const html = el.innerHTML; @@ -52,7 +47,6 @@ class Report extends Component { options.headerTemplate = '\n'; options.footerTemplate = footer; - console.log(options); const buffer = await page.pdf(options); await browser.close(); diff --git a/print/templates/reports/item-label/options.json b/print/templates/reports/item-label/options.json index 1cc4e1529..98c5788b1 100644 --- a/print/templates/reports/item-label/options.json +++ b/print/templates/reports/item-label/options.json @@ -1,5 +1,4 @@ { - "landscape": true, "width": "10.4cm", "height": "4.8cm", "margin": { @@ -7,5 +6,6 @@ "right": "0cm", "bottom": "0cm", "left": "0cm" - } + }, + "printBackground": true } \ No newline at end of file From b9cc71aeba691a66f75779eb8c740ce3b10c6247 Mon Sep 17 00:00:00 2001 From: Joan Sanchez Date: Mon, 6 Jul 2020 12:59:16 +0200 Subject: [PATCH 3/4] There's no way to prevent tbody page-break --- print/common/css/layout.css | 41 ++++++++++--------------------------- 1 file changed, 11 insertions(+), 30 deletions(-) diff --git a/print/common/css/layout.css b/print/common/css/layout.css index 3768fb8ea..3b2643dc9 100644 --- a/print/common/css/layout.css +++ b/print/common/css/layout.css @@ -157,32 +157,6 @@ table { border-spacing: 0; } -thead { - display: table-header-group -} - -/** - * Prevent page break fix - */ -tbody { - page-break-inside: avoid; - break-inside: avoid; - display: block -} - -tbody tr { - table-layout: fixed; - display: table -} - -thead, tbody, tbody tr { - width: 100%; -} - -tfoot { - display: block -} - .row-oriented, .column-oriented { text-align: left; width: 100% @@ -198,6 +172,7 @@ tfoot { } .column-oriented thead { + display: table-header-group; background-color: #e5e5e5 } @@ -207,18 +182,24 @@ tfoot { background-color: #e5e5e5 } +.column-oriented tfoot { + display: table-row-group; + page-break-inside: avoid; + break-inside: avoid; +} + .column-oriented tbody { border-bottom: 1px solid #DDD; } -.column-oriented tfoot { - border-top: 2px solid #808080; -} - .column-oriented tfoot tr:first-child td { padding-top: 20px !important; } +.column-oriented tfoot tr:first-child { + border-top: 2px solid #808080; +} + .column-oriented .description { font-size: 0.8em } From 0335d6c51e0e6348f59ece827abd08a3a94ef224 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20S=C3=A1nchez?= Date: Thu, 9 Jul 2020 08:45:17 +0200 Subject: [PATCH 4/4] Removed commented lines --- print/core/report.js | 1 - print/methods/report.js | 2 -- 2 files changed, 3 deletions(-) diff --git a/print/core/report.js b/print/core/report.js index ea6a360b5..75eb66962 100644 --- a/print/core/report.js +++ b/print/core/report.js @@ -1,5 +1,4 @@ const fs = require('fs'); -// const pdf = require('html-pdf'); const puppeteer = require('puppeteer'); const path = require('path'); const config = require('./config'); diff --git a/print/methods/report.js b/print/methods/report.js index 41b09ed05..eea249a42 100644 --- a/print/methods/report.js +++ b/print/methods/report.js @@ -10,8 +10,6 @@ module.exports = app => { res.setHeader('Content-type', 'application/pdf'); res.setHeader('Content-Disposition', `inline; filename="${fileName}"`); - - //stream.pipe(res); res.end(stream); } catch (error) { next(error);