Switch to puppeteer

This commit is contained in:
Joan Sanchez 2020-07-02 16:07:26 +02:00
parent 3284ef5b55
commit 6fe50dc040
21 changed files with 153 additions and 161 deletions

View File

@ -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%

View File

@ -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
}

View File

@ -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",

View File

@ -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%
}

View File

@ -1,4 +1,4 @@
numPages: Page {{page}} of {{pages}}
numPages: Page <span class="pageNumber"></span> of <span class="totalPages"></span>
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

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:
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

View File

@ -1,4 +1,4 @@
numPages: Page {{page}} de {{pages}}
numPages: Page <span class="pageNumber"></span> de <span class="totalPages"></span>
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

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:
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

View File

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

View File

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

View File

@ -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;
}
}

View File

@ -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);
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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"
}
}

View File

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

View File

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

View File

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