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.
Related
I use following code to open a chrome browser action popup. I have specified min-width & min-height to html & body element, but it doesn't seem to work, as I can see a small white box when I click on icon & then my content & styles get applied. I am trying to set default dimensions so there shouldn't be a small white box at first at all!
chrome.browserAction.setPopup({
popup: 'index.html',
})
In my css:
html,
body {
margin: 0;
min-width: 200px;
min-height: 300px;
}
Set height:100vh
If not height it should take height 100%.
Problem
When you use fabric js for generating text components and convert then to SVG.
I want to see the problem and try reproduce and/or resolve
----->Please check first comment <-----
How to use demo to reproduce
Open Url of demo
Run it
Click on add text component it will add English test text component.
Now change the text by double click and paste this for example arabic word شريف
Open your browser inspector.
click on print to console button .
Expected result
To look like this
This is fixed in newer version. Update to v2.3.3 (latest) , your fabricjs version v1.5 is too old and its not maintained any more.
find latest here
fabric.js website
DEMO
var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setDimensions({
width:400,height:400
})
text = new fabric.IText('شريف', {
left: 50,
top: 100,
fontFamily: 'arial black',
fill: '#333',
fontSize: 50
})
canvas.add(text);
console.log(text.toSVG());
function printtest(){
console.log(text.toSVG());
}
#c{
border:1px solid red;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="printtest()">print console</button><br>
<canvas id="c"></canvas>
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',
}
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.
Is it possible to change body style when entering a full page preview in ckeditor 3. Maybe to set a different body style for full page than when it is not in a full page mode.
The reason for this is using ckeditor when viewing a web page on a larger screen with maximized browser... in that case it is very wide and it is hard to read the content. So I would like to add in body style (but only for full page mode) something like:
...
margin: 5%;
padding: 5%;
border: 1px dotted #666;
...
... that will give more text processor look to the content.
TNX!
When CKEditor is toggled to fullscreen mode it adds "cke_maximized" class to container span.
So you may apply styles for entire container span (body+toolbar) like:
.cke_maximized{
margin: 5%;
padding: 5%;
border: 1px dotted #666;
}
or just for content body:
.cke_maximized iframe{
margin: 5%;
padding: 5%;
border: 1px dotted #666;
}
Those are just examples and you may experiment and choose css selector that is more suitable for you .
UPDATE 1:
Sure, you can use javascript code if it is not enough for your purposes. You can use something like this:
var editor = CKEDITOR.instances.editor1;
editor.on("afterCommandExec", function(e){
if(e.data.name == 'maximize'){
// maximized
if(e.data.command.state == CKEDITOR.TRISTATE_ON){
// add special css class to body(e.editor.document.getBody())
} else {
// minimized
// remove special css from body
}
}
});