Pdfmake: Page Header with a logo(image)
Is it possible to add a logo(image) to the page header
ynfiesta
All 16 comments
Yes, you can set header/footer to any valid node (or a function which returns a note if you need dynamic content)
Here we go with the playground snippet:
// playground requires you to assign document definition to a variable called dd
var dd = {
header: {
margin: 10,
columns: [
{
// usually you would use a dataUri instead of the name for client-side printing
// sampleImage.jpg however works inside playground so you can play with it
image: 'sampleImage.jpg',
width: 40
},
{
margin: [10, 0, 0, 0],
text: 'Here goes the rest'
}
]
},
content: [
'Here goes your content',
],
}
bpampuch
on 17 May 2014
Why the header only accepts smaller pictures? (Like logos)
i need to put an image that fills the top of the page, but when you increase the width of the image, it disappears.
marcuskbra
on 26 May 2014
You have to play with the page margins, in the following example adding the page margins makes the header show:
// playground requires you to assign document definition to a variable called dd
var dd = {
pageMargins: [40, 80, 40, 40],
header: {
margin: 18,
columns: [
{
// usually you would use a dataUri instead of the name for client-side printing
// sampleImage.jpg however works inside playground so you can play with it
image: 'sampleImage.jpg',
width: 100
}
]
},
content: [
'Here goes your content',
],
}
ynfiesta
on 27 May 2014
my mistake was that i put a margin smaller than header image size... after use the correct size, it works...
thanks
marcuskbra
on 29 May 2014
Hi All,
I have the same issue. My code look like:
docDefinition = {
pageOrientation: 'landscape',
header: {
margin: 40,
columns: [
{
image: "data:image/png;base64,iVBORw0KGg.....",
width: 150,
height: 40
}
]
}
When I add margin, image disappears, If I remove margin ... work fine.
webDeveloperAle
on 10 Nov 2014
@bpampuch As you can see in the playground snippet below, unfortunatley that answer dosnt seem to work...
While the text is stable, the image goes to the right more and more with every new page.
Am I doing it wrong?
var dd = {
header: {
margin: 10,
columns: [
{
// usually you would use a dataUri instead of the name for client-side printing
// sampleImage.jpg however works inside playground so you can play with it
image: 'sampleImage.jpg',
width: 40
},
{
margin: [10, 0, 0, 0],
text: 'Here goes the rest'
}
]
},
content: [
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
'Here goes your content','Here goes your content','Here goes your content',
],
}
Mario-Eis
on 30 Jun 2016
While the text is stable, the image goes to the right more and more with every new page.
I met this too. Anyone has clue?
max-yu
on 26 Jul 2016
I am using a table in the header because of the background color, My Header goes right more and more with next pages.. Please waiting for some workaround.
gururajmca
on 26 Jul 2016
I got the work around for the issue, But i feel its taking more time to render the pdf.
var dd = {
header: function() {
return {
table: {
widths: [ '50%','*'],
body: [
[
{
image: 'image1.png',
fillColor: '#99D6E3',
width:100
},
{
image: 'image2.png',
fillColor: '#99D6E3',
width:100,
alignment:'right'
}
]
]
},
layout: 'noBorders'
}
},
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
{
text: 'This isdi osdf iosdf',
pageBreak: 'after',
}
]
}
gururajmca
on 26 Jul 2016
@gururajmca is right - if put in a column, the image in a footer moves to the right with every new page. Could this be a bug?
d.footer = [
{
columns: [
{
image: "views/images/Logo_Grau_mit_Schriftzug_15mm_300_dpi.png",
width: 50*7.2/2.54,
//alignment: "right",
},
{
text: "Stand: "+moment().format("D.M.YYYY")
},
],
margin: mm([20,0,10,10]),
}
]
andreash
on 10 Aug 2016
If I replace my margin (the mm() function transforms from [mm] to [pt], by the way), by a leftmost and a rightmost column of 20 respective 10mm the result is still the same: the image moves to the right. If I don't apply a margin at all,everything seems to be fine.
andreash
on 10 Aug 2016
thanks @gururajmca : the workaround with wrapping the header in a function works for me.
janp77
on 1 Sep 2016
@bpampuch please i have the same problem with the image in the header, the image goes right more and more with next pages... is there any solution regards ...
SaidMarar
on 3 Dec 2016
I am having an issue exporting an image as well as a header within exporterPdfHeader. I am using exporterPdfHeader because I am exporting a ui grid as a pdf.
$scope.gridOptions.exporterPdfHeader ={
columns: [{
margin: [176, -5, 30, 15],
image: //long data url
width: 200,
height: 58,
}],
margin: [30, 10, 30, 10],
table: {
widths: [ '*', '*', '*' ],
body: [
[ 'Region: ' + $scope.region, 'Group: ' + $scope.group, 'MC: ' + $scope.mc ],
[ 'District #: ' + $scope.district, 'Route #: ' + $scope.route, 'Week Ending Date: ' + $scope.weekEndDate],
]
},
};
$scope.export();
Within export the page margins show the logo BUT the header containing Region, Group, etc, does not show. How can I show both the logo and the header. Can I do both within exporterPdfHeader?
$scope.export = function(){
....
content.pageMargins = [40, 80, 40, 60];
}
AndrewPreciado
on 13 Apr 2017
@AndrewPreciado I am having same issue, please guide me
KunwarAkanksha
on 4 Sep 2019
Moving the style outside of the columns array altogether worked for me.
header: {
columns: [
{
text: 'Some text on the left side of the header',
style: 'pageHeader'
},
{
image: 'logo',
width: 80,
},
],
style: 'header'
}
... and then after your content you have your styles where you give the whole header a style instead of the image itself.
styles: {
pageHeader: {
fontSize: 9
},
header: {
margin: [25, 10, 25, 5]
},
...other styles
},
podoglyph
on 25 Feb 2021
Related issues
svenyonson
路
3Comments
SummerSonnet
路
3Comments
sayjeyhi
路
3Comments
jkd003
路
3Comments
Masber
路
3Comments
Most helpful comment
I got the work around for the issue, But i feel its taking more time to render the pdf.
var dd = { header: function() { return { table: { widths: [ '50%','*'], body: [ [ { image: 'image1.png', fillColor: '#99D6E3', width:100 }, { image: 'image2.png', fillColor: '#99D6E3', width:100, alignment:'right' } ] ] }, layout: 'noBorders' } }, content: [ 'First paragraph', 'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines', { text: 'This isdi osdf iosdf', pageBreak: 'after', } ] }