Comments (16)
Mario-Eis
commented on September 12, 2024
8
@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',
],
}
from pdfmake.
gururajmca
commented on September 12, 2024
4
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', } ] }
from pdfmake.
bpampuch
commented on September 12, 2024
2
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',
],
}
from pdfmake.
ynfiesta
commented on September 12, 2024
1
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',
],
}
from pdfmake.
janp77
commented on September 12, 2024
1
thanks @gururajmca : the workaround with wrapping the header in a function works for me.
from pdfmake.
AndrewPreciado
commented on September 12, 2024
1
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];
}
from pdfmake.
marcuskbra
commented on September 12, 2024
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.
from pdfmake.
marcuskbra
commented on September 12, 2024
my mistake was that i put a margin smaller than header image size... after use the correct size, it works...
thanks
from pdfmake.
webDeveloperAle
commented on September 12, 2024
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.
from pdfmake.
max-yu
commented on September 12, 2024
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?
from pdfmake.
gururajmca
commented on September 12, 2024
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.
from pdfmake.
andreash
commented on September 12, 2024
@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]), } ]
from pdfmake.
andreash
commented on September 12, 2024
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.
from pdfmake.
SaidMarar
commented on September 12, 2024
@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 ...
from pdfmake.
KunwarAkanksha
commented on September 12, 2024
@AndrewPreciado I am having same issue, please guide me
from pdfmake.
podoglyph
commented on September 12, 2024
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
},
from pdfmake.
Related Issues (20)
- Query regarding use of polyfill.js in pdfmake HOT 1
- Uncaught (in promise) File 'Roboto-Regular.ttf' not found in virtual file system HOT 1
- Page break not detected in empty rows that are not headers
- Help needed: how can i forcefully prevent my table cell from wrapping onto the next page? HOT 3
- Table border extends outside the table when table spans across multiple pages HOT 1
- Setting language has no effect on rendered PDF HOT 1
- Deprecation warning: [email protected] HOT 1
- Line issue while table starts in new page HOT 1
- Pdf layout breaks when table has headerRows = 0 and keepWithHeaderRows > 0 HOT 1
- How should we hide the header and footer sections for some of the pages HOT 1
- Jj
- Issue with rounded table borders not fixed,
- Issue with rounded table borders not fixed, HOT 1
- Rtl Direction issue HOT 1
- Top Border Not Rendering Correctly Across Page Breaks with dontBreakRows: true HOT 2
- Error when building the project using pdfMake in my React Vite project
- How am I supposed to determine table row/col from a layout callback?
- Uncaught invalid image, images dictionary should contain dataURL entries (or local file paths in node.js) HOT 1
- Canvas location changing on every call HOT 2
- Embed XML? PDF/A-3 format? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pdfmake.