verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 58 Releases Wiki Activity

2162-print_pdf_puppeteer #335

Merged
joan merged 6 commits from 2162-print_pdf_puppeteer into dev 2020-07-09 07:26:51 +00:00
Conversation 0 Commits 6 Files Changed 21 +153 -161
21 changed files with 153 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6fe50dc040 - Show all commits

18
print/common/css/layout.css
View File

@ -157,22 +157,32 @@ table {
border-spacing: 0; border-spacing: 0;
} }
thead {
display: table-header-group
}
/** /**
* Prevent page break fix * Prevent page break fix
*/ */
tbody { tbody {
page-break-inside: avoid; page-break-inside: avoid;
break-inside: avoid; break-inside: avoid;
display: block; display: block
width: 100%
} }
thead, tbody tr { tbody tr {
table-layout: fixed; table-layout: fixed;
display: table; display: table
}
thead, tbody, tbody tr {
width: 100%; width: 100%;
} }
tfoot {
display: block
}
.row-oriented, .column-oriented { .row-oriented, .column-oriented {
text-align: left; text-align: left;
width: 100% width: 100%

6
print/common/css/report.css
View File

@ -3,12 +3,12 @@
* *
*/ */
body { body {
zoom: 0.53 zoom: 0.70;
} }
.title { .title {
margin-bottom: 20px; margin-bottom: 20px;
font-weight: 100; font-weight: 100;
margin-top: 0; font-size: 2em;
font-size: 2em margin-top: 0
} }

12
print/config/print.json
View File

@ -13,10 +13,14 @@
}, },
"pdf": { "pdf": {
"format": "A4", "format": "A4",
"border": "1.5cm", "margin": {
"footer": { "top": "1.5cm",
"height": "55px" "right": "1.5cm",
} "bottom": "3cm",
"left": "1.5cm"
},
"displayHeaderFooter": true,
"printBackground": true
}, },
"mysql": { "mysql": {
"host": "localhost", "host": "localhost",

20
print/core/components/report-footer/assets/css/style.css
View File

@ -1,11 +1,13 @@
footer { .footer {
font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-size: 0.55em; margin-left: 2cm;
margin-right: 2cm;
font-size: 10px;
color: #555; color: #555;
zoom: 0.65 zoom: 0.65
} }
footer, footer p { .footer p {
text-align: center text-align: center
} }
@ -13,12 +15,20 @@ p.privacy {
font-size: 0.8em font-size: 0.8em
} }
footer .page { .footer .page {
border-bottom: 2px solid #CCC; border-bottom: 2px solid #CCC;
padding-bottom: 2px padding-bottom: 2px
} }
footer .page > section { .page .centerText {
text-align: center
}
.page .pageCount {
text-align: right
}
.footer .page > div {
display: inline-block; display: inline-block;
width: 33% width: 33%
} }

2
print/core/components/report-footer/locale/en.yml
View File

@ -1,4 +1,4 @@
numPages: Page {{page}} of {{pages}} numPages: Page <span class="pageNumber"></span> of <span class="totalPages"></span>
law: law:
privacy: 'In compliance with the provisions of Organic Law 15/1999, on the 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 Protection of Personal Data, we inform you that the personal data you provide

2
print/core/components/report-footer/locale/es.yml
View File

@ -1,4 +1,4 @@
numPages: Página {{page}} de {{pages}} numPages: Página <span class="pageNumber"></span> de <span class="totalPages"></span>
law: law:
privacy: En cumplimiento de lo dispuesto en la Ley Orgánica 15/1999, de Protección 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 de Datos de Carácter Personal, le comunicamos que los datos personales que facilite

2
print/core/components/report-footer/locale/fr.yml
View File

@ -1,4 +1,4 @@
numPages: Page {{page}} de {{pages}} numPages: Page <span class="pageNumber"></span> de <span class="totalPages"></span>
law: law:
privacy: Conformément aux dispositions de la loi organique 15/1999 sur la protection 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 des données personnelles, nous vous informons que les données personnelles que

2
print/core/components/report-footer/locale/pt.yml
View File

@ -1,4 +1,4 @@
numPages: Página {{page}} de {{pages}} numPages: Página <span class="pageNumber"></span> de <span class="totalPages"></span>
law: law:
privacy: Em cumprimento do disposto na lei Orgânica 15/1999, de Protecção de Dados 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 de Carácter Pessoal, comunicamos que os dados pessoais que facilite se incluirão

16
print/core/components/report-footer/report-footer.html
View File

@ -1,9 +1,11 @@
<footer> <div>
<section class="page"> <div class="footer">
<section v-if="leftText">{{leftText}}</section> <div class="page">
<section v-if="centerText" class="uppercase">{{centerText}}</section> <div class="leftText" v-if="leftText">{{leftText}}</div>
<section class="number">{{$t('numPages')}}</section> <div class="centerText" v-if="centerText" class="uppercase">{{centerText}}</div>
</section> <div class="pageCount" v-html="$t('numPages')"></div>
</div>
<p class="phytosanitary" v-if="showPhytosanitary">{{phytosanitary}}</p> <p class="phytosanitary" v-if="showPhytosanitary">{{phytosanitary}}</p>
<p class="privacy" v-html="$t('law.privacy')"></p> <p class="privacy" v-html="$t('law.privacy')"></p>
</footer> </div>
</div>

2
print/core/components/report-header/assets/css/style.css
View File

@ -4,7 +4,7 @@ header {
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 20px; margin-bottom: 20px;
text-align: center; text-align: center;
font-size: 0.55em; font-size: 12px;
color: #555 color: #555
} }

33
print/core/report.js
View File

@ -1,5 +1,6 @@
const fs = require('fs'); const fs = require('fs');
const pdf = require('html-pdf'); // const pdf = require('html-pdf');
bernat commented 2020-07-09 06:45:03 +00:00
Review
Copy Link

delete commnet

delete commnet
const puppeteer = require('puppeteer');
const path = require('path'); const path = require('path');
const config = require('./config'); const config = require('./config');
const Component = require('./component'); const Component = require('./component');
@ -20,18 +21,42 @@ class Report extends Component {
async toPdfStream() { async toPdfStream() {
const template = await this.render(); const template = await this.render();
let options = config.pdf; let options = Object.assign({}, config.pdf);
const optionsPath = `${this.path}/options.json`; const optionsPath = `${this.path}/options.json`;
const fullPath = path.resolve(__dirname, optionsPath); const fullPath = path.resolve(__dirname, optionsPath);
if (fs.existsSync(fullPath)) if (fs.existsSync(fullPath))
options = Object.assign(options, require(optionsPath)); options = Object.assign(options, require(optionsPath));
return new Promise(resolve => { /* return new Promise(resolve => {
pdf.create(template, options).toStream((err, stream) => { pdf.create(template, options).toStream((err, stream) => {
resolve(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;
} }
} }

3
print/methods/report.js
View File

@ -11,7 +11,8 @@ module.exports = app => {
res.setHeader('Content-type', 'application/pdf'); res.setHeader('Content-type', 'application/pdf');
res.setHeader('Content-Disposition', `inline; filename="${fileName}"`); res.setHeader('Content-Disposition', `inline; filename="${fileName}"`);
stream.pipe(res); //stream.pipe(res);
res.end(stream);
} catch (error) { } catch (error) {
next(error); next(error);
} }

8
print/templates/reports/campaign-metrics/campaign-metrics.html
View File

@ -6,11 +6,7 @@
<tr> <tr>
<td> <td>
<!-- Header block --> <!-- Header block -->
<div class="grid-row">
<div class="grid-block">
<report-header v-bind="$props"></report-header> <report-header v-bind="$props"></report-header>
</div>
</div>
<!-- Block --> <!-- Block -->
<div class="grid-row"> <div class="grid-row">
<div class="grid-block"> <div class="grid-block">
@ -93,15 +89,11 @@
</div> </div>
</div> </div>
<!-- Footer block --> <!-- Footer block -->
<div class="grid-row">
<div class="grid-block">
<report-footer id="pageFooter" <report-footer id="pageFooter"
v-bind:left-text="$t('client', [client.id])" v-bind:left-text="$t('client', [client.id])"
v-bind:center-text="client.socialName" v-bind:center-text="client.socialName"
v-bind="$props"> v-bind="$props">
</report-footer> </report-footer>
</div>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

8
print/templates/reports/claim-pickup-order/claim-pickup-order.html
View File

@ -6,11 +6,7 @@
<tr> <tr>
<td> <td>
<!-- Header block --> <!-- Header block -->
<div class="grid-row">
<div class="grid-block">
<report-header v-bind="$props"></report-header> <report-header v-bind="$props"></report-header>
</div>
</div>
<!-- Block --> <!-- Block -->
<div class="grid-row"> <div class="grid-row">
<div class="grid-block"> <div class="grid-block">
@ -85,15 +81,11 @@
</div> </div>
</div> </div>
<!-- Footer block --> <!-- Footer block -->
<div class="grid-row">
<div class="grid-block">
<report-footer id="pageFooter" <report-footer id="pageFooter"
v-bind:left-text="$t('claim', [claimId])" v-bind:left-text="$t('claim', [claimId])"
v-bind:center-text="client.name" v-bind:center-text="client.name"
v-bind="$props"> v-bind="$props">
</report-footer> </report-footer>
</div>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

8
print/templates/reports/delivery-note/delivery-note.html
View File

@ -6,13 +6,9 @@
<tr> <tr>
<td> <td>
<!-- Header block --> <!-- Header block -->
<div class="grid-row">
<div class="grid-block">
<report-header v-bind="$props" <report-header v-bind="$props"
v-bind:company-code="ticket.companyCode"> v-bind:company-code="ticket.companyCode">
</report-header> </report-header>
</div>
</div>
<!-- Block --> <!-- Block -->
<div class="grid-row"> <div class="grid-row">
<div class="grid-block"> <div class="grid-block">
@ -241,8 +237,6 @@
</div> </div>
</div> </div>
<!-- Footer block --> <!-- Footer block -->
<div class="grid-row">
<div class="grid-block">
<report-footer id="pageFooter" <report-footer id="pageFooter"
v-bind:company-code="ticket.companyCode" v-bind:company-code="ticket.companyCode"
v-bind:show-phytosanitary="true" v-bind:show-phytosanitary="true"
@ -250,8 +244,6 @@
v-bind:center-text="client.socialName" v-bind:center-text="client.socialName"
v-bind="$props"> v-bind="$props">
</report-footer> </report-footer>
</div>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

8
print/templates/reports/driver-route/driver-route.html
View File

@ -6,11 +6,7 @@
<tr> <tr>
<td> <td>
<!-- Header block --> <!-- Header block -->
<div class="grid-row">
<div class="grid-block">
<report-header v-bind="$props"></report-header> <report-header v-bind="$props"></report-header>
</div>
</div>
<!-- Block --> <!-- Block -->
<div class="grid-row"> <div class="grid-row">
<div class="grid-block"> <div class="grid-block">
@ -154,14 +150,10 @@
</div> </div>
</div> </div>
<!-- Footer block --> <!-- Footer block -->
<div class="grid-row">
<div class="grid-block">
<report-footer id="pageFooter" <report-footer id="pageFooter"
v-bind:left-text="$t('routeId', [route.id])" v-bind:left-text="$t('routeId', [route.id])"
v-bind="$props"> v-bind="$props">
</report-footer> </report-footer>
</div>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

8
print/templates/reports/entry-order/entry-order.html
View File

@ -6,13 +6,9 @@
<tr> <tr>
<td> <td>
<!-- Header block --> <!-- Header block -->
<div class="grid-row">
<div class="grid-block">
<report-header v-bind="$props" <report-header v-bind="$props"
v-bind:company-code="entry.companyCode"> v-bind:company-code="entry.companyCode">
</report-header> </report-header>
</div>
</div>
<!-- Block --> <!-- Block -->
<div class="grid-row"> <div class="grid-row">
<div class="grid-block"> <div class="grid-block">
@ -126,16 +122,12 @@
</div> </div>
</div> </div>
<!-- Footer block --> <!-- Footer block -->
<div class="grid-row">
<div class="grid-block">
<report-footer id="pageFooter" <report-footer id="pageFooter"
v-bind:left-text="$t('entry', [entry.id])" v-bind:left-text="$t('entry', [entry.id])"
v-bind:company-code="entry.companyCode" v-bind:company-code="entry.companyCode"
v-bind:center-text="supplier.name" v-bind:center-text="supplier.name"
v-bind:="$props"> v-bind:="$props">
</report-footer> </report-footer>
</div>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

11
print/templates/reports/item-label/options.json
View File

@ -1,10 +1,11 @@
{ {
"format": "A4", "landscape": true,
"orientation": "landscape",
"width": "10.4cm", "width": "10.4cm",
"height": "4.8cm", "height": "4.8cm",
"border": "0cm", "margin": {
"footer": { "top": "0cm",
"height": "0" "right": "0cm",
"bottom": "0cm",
"left": "0cm"
} }
} }

17
print/templates/reports/letter-debtor/letter-debtor.html
View File

@ -6,11 +6,7 @@
<tr> <tr>
<td> <td>
<!-- Header block --> <!-- Header block -->
<div class="grid-row">
<div class="grid-block">
<report-header v-bind="$props"></report-header> <report-header v-bind="$props"></report-header>
</div>
</div>
<!-- Block --> <!-- Block -->
<div class="grid-row"> <div class="grid-row">
<div class="grid-block"> <div class="grid-block">
@ -74,24 +70,23 @@
<tr> <tr>
<td></td> <td></td>
<td></td> <td></td>
<td class="number"><strong class="pull-left">Total</strong> {{getTotalDebtOut()}}</td> <td class="number">
<td class="number">{{getTotalDebtIn()}}</td> <strong class="pull-left">Total</strong>
<td class="number">{{totalBalance}}</td> {{getTotalDebtOut() | currency('EUR', $i18n.locale)}}
</td>
<td class="number">{{getTotalDebtIn() | currency('EUR', $i18n.locale)}}</td>
<td class="number">{{totalBalance | currency('EUR', $i18n.locale)}}</td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div> </div>
</div> </div>
<!-- Footer block --> <!-- Footer block -->
<div class="grid-row">
<div class="grid-block">
<report-footer id="pageFooter" <report-footer id="pageFooter"
v-bind:left-text="$t('client', [client.id])" v-bind:left-text="$t('client', [client.id])"
v-bind:center-text="client.socialName" v-bind:center-text="client.socialName"
v-bind="$props"> v-bind="$props">
</report-footer> </report-footer>
</div>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

8
print/templates/reports/receipt/receipt.html
View File

@ -6,11 +6,7 @@
<tr> <tr>
<td> <td>
<!-- Header block --> <!-- Header block -->
<div class="grid-row">
<div class="grid-block">
<report-header v-bind="$props"></report-header> <report-header v-bind="$props"></report-header>
</div>
</div>
<!-- Block --> <!-- Block -->
<div class="grid-row"> <div class="grid-row">
<div class="grid-block"> <div class="grid-block">
@ -36,15 +32,11 @@
</div> </div>
</div> </div>
<!-- Footer block --> <!-- Footer block -->
<div class="grid-row">
<div class="grid-block">
<report-footer id="pageFooter" <report-footer id="pageFooter"
v-bind:left-text="$t('client', [client.id])" v-bind:left-text="$t('client', [client.id])"
v-bind:center-text="client.socialName" v-bind:center-text="client.socialName"
v-bind="$props"> v-bind="$props">
</report-footer> </report-footer>
</div>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

8
print/templates/reports/sepa-core/sepa-core.html
View File

@ -6,11 +6,7 @@
<tr> <tr>
<td> <td>
<!-- Header block --> <!-- Header block -->
<div class="grid-row">
<div class="grid-block">
<report-header v-bind="$props"></report-header> <report-header v-bind="$props"></report-header>
</div>
</div>
<!-- Block --> <!-- Block -->
<div class="grid-row"> <div class="grid-row">
<div class="grid-block"> <div class="grid-block">
@ -166,15 +162,11 @@
</div> </div>
</div> </div>
<!-- Footer block --> <!-- Footer block -->
<div class="grid-row">
<div class="grid-block">
<report-footer id="pageFooter" <report-footer id="pageFooter"
v-bind:left-text="$t('order', [supplier.mandateCode])" v-bind:left-text="$t('order', [supplier.mandateCode])"
v-bind:center-text="client.socialName" v-bind:center-text="client.socialName"
v-bind="$props"> v-bind="$props">
</report-footer> </report-footer>
</div>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>