Switch to puppeteer
This commit is contained in:
parent
3284ef5b55
commit
6fe50dc040
|
@ -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%
|
||||
|
|
|
@ -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
|
||||
}
|
|
@ -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",
|
||||
|
|
|
@ -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%
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -4,7 +4,7 @@ header {
|
|||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-size: 0.55em;
|
||||
font-size: 12px;
|
||||
color: #555
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue