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;
}
}
Related
I have a font in a fonts/ directory. How do I load this into the game, then use it on a text object in my game? I haven't been able to find anything on using fonts in Phaser 3.
First use css to load your font(#fontface):
<style media='screen' type='text/css'>
#font-face {
font-family: font1;
src: url('media/yourfont.ttf');
font-weight:400;
font-weight:normal;
}
</style>
And then use a div to load your font:
<div style="font-family:font1; position:absolute; left:-1000px; visibility:hidden;">.</div>
Now you can put it in add it in your game:
this.add.text(190, 136, 'text', {
fontFamily: 'font1',
});
Pure JS Solution:
Here's a small function I made, which only requires the font name and url:
function loadFont(name, url) {
var newFont = new FontFace(name, `url(${url})`);
newFont.load().then(function (loaded) {
document.fonts.add(loaded);
}).catch(function (error) {
return error;
});
}
And use it like:
loadFont("mixolydian", "assets/fonts/mixolydian.ttf");
That's it! You can now use your custom font in Phaser. All you have to do is change the fontFamily value to your new font name (i.e. mixolydian).
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.
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.
I'm using Fancybox 2.1.3 to display some text when the page loads. The problem is that it's wrapping it onto two lines when I want it to all be on one line. I've tried the width, autoSize, and fitToView properties, and none of them are doing anything.
I'd prefer not to modify the fancybox css files, since I'm also using fancybox to display some images, and those are working properly.
Javascript
<script type='text/javascript'>
$(document).ready(function(){
// Activate fancyBox
$('.text').fancybox({
padding : 0,
closeBtn : false,
topRatio : 0.75,
helpers : {
overlay: {
css: {'background' : 'rgba(0, 0, 0, 0.0)'}
} // overlay
} // helpers
});
// Launch fancyBox on first element
$('.text').eq(0).trigger('click');
// Close automatically
setTimeout('parent.$.fancybox.close();', 10000);
});
HTML
<a href='#textid' class='text'></a>
<div style='display: none'>
<div id='textid'>The display text goes here.</div>
</div>
CSS
#textid
{
font-size: 40px;
color: red;
}
#textid {
font-size: 40px;
color: red;
white-space: nowrap;
}