I am trying to create a multiline footer with pdfmake; what I was able to do until now:
const docDefinition = {
footer: [
{
stack: [
{ text: "Line 1" },
{ text: "Line 2" },
{ text: "Line 3" },
{ text: "Line 4" }
], style: 'footer'
}
],
styles: {
footer: {
fontSize: 6, bold: true, alignment: 'center'
}
}
};
While this creates what I want, the style is not correct. As soon as I increase the font size, the bottom line starts to disappear. If I set the font size to 12, only the first two lines appear in the generated PDF on the server-side.
What change do I need to make here?
You just need to add margin to the page and you can accommodate as many lines as you want. e.g. Enter the code below in pdfmake playground: http://pdfmake.org/playground.html
// playground requires you to assign document definition to a variable called dd
let textFooter = `
A 12.4% discretionary service charge will be added to your bill. All prices are inclusive of VAT. Thank You!\n\n
This is line 2 - 263139\n
Line 3 comes here\n
Go big or go home!!!
`;
var dd = {
header: function(currentPage, pageCount, pageSize) {
return [
{ text: 'simple text\naaa\nbbb\nccc\nddd', alignment: 'center', fontSize: 9 },
]
},
footer: function(currentPage, pageCount, pageSize) {
return [
{ text: textFooter, alignment: 'center', fontSize: 9 },
]
},
// margin: [left, top, right, bottom]
pageMargins: [ 40, 60, 40, 100 ],
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
In the code above, I have set margin bottom to 100 which gives us space to include 4 lines.
Related
I have API that generate pdf file after saving values into database. My customer needed to generate this pdf and then send it by mail. He sended my photo of how should that pdf look like. I recreated it, it looks same as in that picture but it is hard to read because there are missing vertical lines. I looked trought docs and also tried to google, bud I did not found anyithing.
Here is how my PDF looks like:
As you can see, vertical lines are missing and because of that is harder to read.
Is there any possibility to add vertical lines?
Here is my code:
let doc = new PDFDocument({ margin: 30, size: "A4" });
doc.pipe(
fs.createWriteStream(`${problemName}_${creationDate}` + ".pdf")
);
const table = {
title:
"Zápis koordinátora " +
koordinatorName +
" zo dna " +
creationDate +
".",
divider: {
header: { disabled: true },
horizontal: { disabled: false, width: 1, opacity: 1 },
padding: 5,
columnSpacing: 10,
},
headers: [
{ width: 130, renderer: null },
{ width: 130, renderer: null },
{ width: 130, renderer: null },
{ width: 130, renderer: null },
],
rows: [
["Nazov", problemName, "", ""],
[
"Nazov staveniska (Projekt)",
constructionName,
"Na vedomie komu",
"mailing list 1",
],
[
"Vytvoril koordinator BOZP",
koordinatorName,
"Priorita",
problemPriority,
],
["Datum zistenia", creationDate, "Datum odstranenia", ""],
[
"Zodpovedny za vyriesenie zistenia",
"Janko Maly",
"Celkovy pocet zisteni v dni",
10,
],
["Miesto zistenia", discoveryPlace, "Zistenie císlo", 1],
["Popis", problemText],
[
"Navrh na udelenie sankcie",
"50€",
"Pre spolocnost",
adressedFor,
],
],
};
doc.table(table, {
prepareHeader: () => doc.font("Helvetica-Bold").fontSize(8),
prepareRow: (row, indexColumn, indexRow, rectRow, rectCell) => {
doc.font("Helvetica").fontSize(8);
indexColumn === 0;
},
});
doc.end();
I am using pdfkit-table package.
Thank you all
By definition simple PDF structure is not tabular there is one cell (the page) and that one column can be subdivide into two or more rows with null spaces between the text sub columns.
That is why tables are difficult to sub[ex]tract
So adding coloured rows in one area is fairly simple to make like a table, thus to make vertical sub dividers is more difficult, However that feature was added in January 2022 https://github.com/natancabral/pdfkit-table/files/7865078/document-5.pdf
For exsample see https://github.com/natancabral/pdfkit-table/issues/16#issuecomment-1012389097
I wan't to set all bars the same width, because if I have few bars they get super big, and If I have a lot bars they get very thin.
Here is what I mean:
I have bar width 50 because I tought this was the size of the bar, but it keeps making bars small if the amount increases.
Here is my code:
$(document).ready(function () {
var chart = c3.generate({
bindto: '#stocked',
size: {
height: 320,
width: 1500
},
data: {
labels: ['y',1,2,3,4,5,6],
columns: [
['MUSCLE', <?php echo substr($muscle,1,strlen($muscle)); ?>],
['FAT', <?php echo substr($fat,1,strlen($fat)); ?>]
],
groups: [
['MUSCLE', 'FAT']
],
type: 'bar',
colors: {
MUSCLE: '#75e3ff',
FAT: '#23bbe8'
}
},
bar: {
// width: { ratio: 0.8 }
width: 50,
},
axis: {
x: {
type: 'categories',
show: true,
label: {
text: 'Measurements',
position: 'outer-middle'
},
tick: {
format: "%b",
fit: true,
},
},
y: {
label: {
text: '<?php echo $_SESSION["unit"]; ?>',
position: 'outer-middle'
}
},
},
// subchart: {
// show: true
// },
// zoom: {
// enabled: true
// }
});
});
Thanks and greetings!
The width of your bars is the result of the width of your chart and the amount of data you have populating it. My recommendation would be to size your chart or the container holding your chart accordingly. This will prevent having large white spaces in between each of your bars and result in a more uniform look between your charts.
ex: pseudo code of how to determine how wide you chart should be.
var chart = c3.generate({
size: {
height: 240,
width: function () {
return 6 * 20 + 15
},
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
}
});
Here you can see that there of 6 pieces of data and each data is given 20 space and then an extra 15 to account for the axis/labels etc. If each you had 50 data then it should be width: 6 * 20 + 15 ..... of course now you have different width chart but the bar widths and space between bars should be pretty uniform. The more data the longer the chart. You might need to "20" and "15" to get the look you want.
how to get pageCount in background object, here is my code.
background: (currentPage, pageCount) => {
if (currentPage === 1) {
return [
{
image: img.coverbg,
height: 521,
width: 756
}
]
}
else if(currentPage == pageCount) {
return [
{
image: img.headbg,
width: 755,
height: 30,
},
]
}
},
i want pageCount in background, but i didnt get that,
i only get currentPage,
so how to get pageCount in background object.
You can use the header and footer functions to access the pageCount parameter.
These functions have three parameters - currentPage, pageCount and pageSize and you can apply any logic and return any valid pdfmake element from these functions.
So essentially, what you're doing in background can be done in either header or footer.
Access current page using currentPage and total page count using pageCount
docDefinition = {
pageMargins: [40, 150, 40, 40],
header: {
margin: 25.5,
columns: [
{
image: logo,
height: 106.4,
width: 540
// alignment: 'center'
}
]
},
footer: function (currentPage, pageCount) {
return [{ text: 'Page ' + currentPage.toString() + ' of ' + pageCount, alignment: 'center' }];
},
content: pdf, //pdf is all the data i use to generate pdf
defaultStyle: {
font: 'Times'
}
}
can't get pageCount in the background object,
we have to find another way for that.
I use ZingCharts for my dashboard charts and I am stucked on this problem. I made a codepen to show my problem. I got array of strings which represent average respond time for some task in hours and I cant figure out why my chart never show 1st string value of array as you can see on codepen.
Here i also post my angular function for this chart
//bar chart with average task time respond
$scope.avgRespondTaskTime = {
gui: {
contextMenu: {
empty: true,
}
},
type: 'bar',
legend: {
//width: "100%",
layout: "center",
position: "50%",
margin: "0px 0px 0px 0px",
borderColor: "transparent",
backgroundColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
tooltip: {
text: "%v hours"
},
"scale-x": {
"label": {
"text": "Project name",
},
"labels": projectNames
},
"scale-y": {
"label": {
"text": "Average Time",
},
},
series: [
{
text: "Completed in Time",
values: $scope.avg_respondTime,
backgroundColor: "#00a65a"
},
]
};
https://codepen.io/spsrulez/pen/ygEvNg
So I solved my problem with using moment.js using this function
moment.duration("your string represent time").asHours()
which I store into array $scope.avg_respondTime
Hope it helps someone in future.
I want to make a tabbed formPanel fitting user's screen.
here's my code:
var form2 = new Ext.FormPanel({
labelWidth: 75,
border:false,
items: {
// removing next line affects the layout %)
xtype:'tabpanel',
activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:[
{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
fieldLabel: 'First Name'
}
]
},
{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
fieldLabel: 'Home'
}
]
}
]
}
});
form2.render('container');
And later in my a have an , of course.
That makes a form with incredibly big width...
If I revome line with "xtype: 'tabpanel'" everything works fine (except there's no tabbed panel on screen)
Is it a bug or I forgot something. Help me figure it out, please=)
Thanks for your attention.
Set anchor and set layout : fit configs for formpanel.