I am generating pdf in nodejs using phantomjs. However, when I try to generate a large pdf (more than 1 A4 size page), it generates only two page pdf. One of the page contains all the matter and the other similar sized (very large) page is blank.
I am using the following code to generate the pdf:
phantom.create("--web-security=no", "--ignore-ssl-errors=yes",function(ph) {
return ph.createPage(function(page) {
return page.open(htmlfilepath, function(status) {
page.paperSize = { format: 'A4', orientation: 'portrait', border: '1cm' };
page.render(pdffilepath, function(){
ph.exit();
});
});
});
});
Can anyone tell the correct method to format pdf in phantomjs. Thanks.
Got it. Even though I did exactly according to many articles and tutorial online, I had to use change the following piece to code:
page.paperSize = { format: 'A4', orientation: 'portrait', border: '1cm' };
to this:
page.set('paperSize', { format: 'A4', orientation: 'portrait', border: '1cm'});
This may be because of the change in version from 1.x.x to 2.x.x.
Related
I am trying to implement a QR code in a PDF document using PDFkit (https://github.com/foliojs/pdfkit) and node-qrcode (https://github.com/soldair/node-qrcode).
Implementing PDF document:
const doc = new PDFDocument({
margin: 0,
size: 'LETTER'
})
doc.pipe(fs.createWriteStream('/files/result.pdf'))
doc.pipe(res)
Creating QR code and adding it to the PDF:
var opts = {
errorCorrectionLevel: 'H',
type: 'image/png',
quality: 0.9,
margin: 1,
color: {
dark:"#000000",
light:"#FFFFFF"
}
}
QRCode.toDataURL('http://link.to.website', function (err, url) {
if (err) throw err
doc.image(url, 50, 45, { width: 50 })
console.log(url)
})
Close the PDF:
doc.end()
Console output of the url from QRCode is correctly formatted and no error messages from PDFKit:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAAAAklEQVR4AewaftIAAAOQSURBVO3BQY5jBxYDweSD7n/lHC+84OoDglTltocR8S/M/O2YKcdMOWbKMVOOmXLMlGOmHDPlmCnHTDlmyjFTjplyzJRjprz4UBJ+k8qTJHxC5R1JaCotCb9J5RPHTDlmyjFTXnyZyjcl4ZtUWhJaEppKS8InVL4pCd90zJRjphwz5cUPS8I7VN6RhG9S+U1JeIfKTzpmyjFTjpny4j9G5R0qLQnvUPkvOWbKMVOOmfLiPy4JTaUloam0JDSVloSm8m92zJRjphwz5cUPU/mTqbQkNJWWhG9S+ZMcM+WYKcdMefFlSfg3SUJTaUloKi0J70jCn+yYKcdMOWbKiw+p/EmS8CdR+Tc5ZsoxU46ZEv/CB5LQVFoSvknlSRKayjuS8AmVloRvUvlJx0w5ZsoxU158SKUloak8ScITlSdJaCotCU3lHSpPkvBEpSWhqbwjCU3lm46ZcsyUY6a8+GFJaCpPVFoSmsqTJLwjCU3lSRKaSktCU3lHEprKkyQ0lU8cM+WYKcdMefGhJDxRaUloKi0JTaUl4R0qLQnvSEJTaUloKk9UWhKayhOVloRvOmbKMVOOmfLihyWhqTxRaUloKt+k0pLwDpWWhCcq70jCbzpmyjFTjpny4h+WhCcqT5LwRKWptCQ0lZaEd6g8SUJTaUloKi0JTeWbjplyzJRjprz4MpWWhCcqT5LwiSQ0labyjiQ8UXmi8k1JaCqfOGbKMVOOmfLih6k8ScITlZaEpvIkCU+S0FSaypMktCQ0lZaET6i0JHzTMVOOmXLMlBf/MJWWhJaEptKS8E1JeKLyjiS8Q6Uloak0lW86ZsoxU46Z8uJDKt+k8ptU3pGEJyrvSEJLwj/pmCnHTDlmyosPJeE3qTSVloQnSXii0pLQVFoSniShqXwiCU9UPnHMlGOmHDPlxZepfFMSniThiUpLQlP5SSqfUPlNx0w5ZsoxU178sCS8Q+UTKt+k0pLwJAnflIR3qHzimCnHTDlmyov/MyotCU9Unqg8SUJTaUloKi0Jv+mYKcdMOWbKi/+YJDSVJyotCS0JTeUdKi0JTeUdKi0J33TMlGOmHDPlxQ9T+UkqT5LQVFoSnqg8ScITlSdJeKLym46ZcsyUY6a8+LIk/KYkNJVPqLQkNJWm8pOS8JuOmXLMlGOmxL8w87djphwz5Zgpx0w5ZsoxU46ZcsyUY6YcM+WYKcdMOWbKMVOOmfI/dLqWFdMR+T4AAAAASUVORK5CYII=
The problem is that no image is displayed in the produced PDF.
If I use any other functions (than doc.image), e.g. doc.text(), doc.circle() all elements works fine and added to the PDF.
Any idea how to solve this?
toDataURL() is a asynchronous method.
I didn't wait for it to complete.
Closed the PDF document after it completed, and that worked.
Is there a way to concat the result of an an html page converted with wkhtmltopdf-node inside a document page created with pdfkit in node.js, instead of just creating a pdf file from html?
const doc = new PDFDocument({
bufferPages:true,
toc: true,
margins: {
top: 125,
bottom: 50,
left: 50,
right: 50
}
});
doc.pipe(fs.createWriteStream('output.pdf'));
doc.addPage();
doc.text("HTML Content ")
// concat the result of this conversion inside doc instead of out.pdf
wkhtmltopdf(params.content, { pageSize: 'letter' }).pipe(fs.createWriteStream('out.pdf'));
Something like
doc.concat(wkhtmltopdf(params.content, { pageSize: 'letter' }));
Tried to export html page in PDF using puppeteer library, however color css property not rendering in PDF.
Added below code in html
<style>
html {
-webkit-print-color-adjust: exact;
}
#media print {
.highlightTxt {
color: #f79747;
}
}
</style>
below code in js
await page.pdf({ path: `./download/${filename}`, format: 'A4', landscape: false, printBackground: true });
Added below and it is working fine.
html {
-webkit-print-color-adjust: exact;
}
#media print {
.highlightTxt {
color: #f79747 !important;
}
}
I have got a problem with the footerTemplate parameter of Puppeteer : the footer is only shown in the last page of the document. I want it to be displayed on every page of the document (well... a footer).
Maybe am I not using the parameters correctly ?
Here is my Puppeteer pdf generation :
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('http://localhost:8000/?' + parameters);
await page.pdf({
path: path,
format: 'A4',
displayHeaderFooter: true,
footerTemplate: '<h1>THIS IS A TEST</h1>'
});
await browser.close();
Thank you for your help !
Based on my experience with the lib, header / footer are goes behind the content of the page.
Try setting some margins to make them visible:
await page.pdf({
path: path,
format: 'A4',
displayHeaderFooter: true,
footerTemplate: '<h1>THIS IS A TEST</h1>',
margin : {
top: '20px',
right: '20px',
bottom: '20px',
left: '20px'
};
});
I came up to this problem as well, and margin settings for puppeteer did not work for me, as my whole webpage was a table. So even though I set bottom margin in puppeteer, the footer was still under the content. I fixed it with the following CSS:
#media print {
#page {
margin-bottom: 1.5rem;
}
}
This is a weird issue but was able to reproduce it.
When searching for text "THIS IS A TEST" it's found as often as the amount of pages in the PDF... But only on the last page the text "THIS IS A TEST" has a color.
Try CTRL+F or CMD+F and search for "THIS IS A TEST".
Look on a page within the document it's there but not shown (marked due to search):
But on the last page it's visible:
There's an open issue on gitHub related to yours puppeteer/issues/1853
I had this problem, I needed to change my margins from
marginTop: 100,
marginBottom: 70
to
margin: {
top: '100px',
bottom: '70px',
}
I'm trying to customize the header and footer. But I cannot add the background color to the footer.
This is what I'm trying to do.
page.pdf({
path: 'test.pdf',
format: 'a4',
landscape: '!data.isPortrait',
footerTemplate: '<div class="footer" style="height:75px;position: absolute;top:auto;left:0px;right:0px;left:0px;background-color:red;">\ </div>',
displayHeaderFooter: true,
margin: {
top: "75px",
bottom: "75px"
}
});
environment
Puppeteer version:1.1.0
Platform / OS version:ubuntu 16.04
Node.js version:8.9
To add background-color to header/footer or to the page in Puppeteer, we need to add an additional css property, -webkit-print-color-adjust: exact. Now it works fine.