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',
}
Related
I'm using puppeteer to generate a PDF file for my report view and I want to add a watermark on that report PDF version. Is there anyway that I can do that?
The easiest way to do it, is to add an additional element to the page, which represents the watermark when the PDF is created. As you can change the page in any way you like, you could add a "Watermark" element to the page like this:
await page.evaluate(() => {
const div = document.createElement('div');
div.innerHTML = 'Watermark Text...';
div.style.cssText = "position: fixed; bottom: 10px; right: 10px; background: red; z-index: 10000";
document.body.appendChild(div);
});
await page.pdf(/* ... */);
The code adds a fixed element to the bottom right of the page. When printed it will appear on every printed page. You can use any kind of CSS styling to style your watermark. Just make sure it has a high z-index value, so that nothing overlaps it.
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.
I am using puppeteer to take page screnshot of a particular width:
await page.setViewport({width: 320, height: 0})
await page.goto(url)
await page.screenshot({path: `screenshot.png`, fullPage: true});
The width of screenshot is exactly 320px. But is it possible to save scaled screenshot (e. g. 2 times larger)? Like in Developer Tools - I can set zoom 150% there.
You can use deviceScaleFactor on page.setViewport
await page.setViewport({width: 320, height: 0, deviceScaleFactor:2});
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.
This may be obvious, but I can't find how to enlarge the font size of an SC.LabelView. What I have now is
title: SC.LabelView.design({
layout: { centerX: 0, centerY: 0, height: 36, width: 200 },
tagName: "h1",
value: "Contacts"
})
Although it is an h1, it stays 'normal' text, but it is a title, as suggested by the property name.
SproutCore includes a CSS reset so that you can style your page and make it look the same across all browsers.
The best way to edit your styles is to add some CSS to my_app/resources/main_page.css using the font-size property.
$theme h1 {
font-size: 30px;
}
There are some comments and links to additional resources in the main_page.css file, but you can learn more from the Chance guide.