jsPDF autotable: Header image not printing in all pages - javascript

I have multiple tables that I want to print in my pdf. The format should be like:
The logo should be at the top of the page, and should be repeated in each page
The table should be printed below the logo
Here's my code to implement this logic:
document.querySelectorAll(".table_neu_parts").forEach((item,index) => {
doc.autoTable({
html: item,
startX: 10,
startY: 50,
theme: 'grid',
bodyStyles: {lineColor: [0, 0, 0]},
styles: {
fontSize: 10,
cellWidth: 'auto',
halign: 'center',
fillColor: [225, 197, 238]
},
})
doc.addPage();
(async function(){
base = await loadImageAsDataURL("/logo.png");
doc.addImage(base,'PNG',15,40,30,38);
})
}
When I execute the above code, the table gets printed in the first page, which is fine (the logo is already printed in the first page, so no worries in that), but in the second page only the table is printed, then the logo gets printed in the third page.
The logo and the table should be on the same page, no matter what. Where am I going wrong? Please help me.
My output:
Expected output:

Related

Is it possible to make img hover overlay with macyjs?

Im building my first website and currently struggle with making img overlay on hover in my gallery.
I've made masonry layout using macyjs and can't get my css right to make an overlay.
This is also my first post here so If I did screw something up with the code snippet, sorry in advance :)
const msnry = new Macy({
container: '.image-grid',
mobileFirst: true,
columns: 1,
breakAt: {
400: 2,
700: 3,
1100: 4,
},
margin: {
x: 20,
y: 20,
},
});

Hidden columns in Material-Table causing crash

I have three columns in my Material-Table which provide useful data but are not essential. I want these columns hidden by default when the page is loaded, but give the user the option to un-hide them. I have the columnsButton option set which allows me to manually select which columns I want hidden. By default, no columns are hidden.
I have tried using hidden: true and hiddenByColumnsButton: true. hidden just hides the column and the option to show it does not appear in the columnsButton list. hiddenbyColumnsButton does not hide the column and no effect the functionality of the list. Using both of them at the same time in the same column results in the app crashing: Uncaught TypeError: Cannot read properties of undefined
This is my table and a two of my columns. For the purpose of this question, I want to have Title hidden by default with the option to display it in the columnsButton list.
const columns = [
{
title: <Typography className={classes.colHeader}>Intake ID</Typography>,
field: "IntakeID",
cellStyle: { minWidth: 118, maxWidth: 118 },
// hidden: true,
},
{
title: <Typography className={classes.colHeader}>Title</Typography>,
field: "Title",
cellStyle: { minWidth: 280, maxWidth: 280 },
hidden: true,
hiddenByColumnsButton: true,
},
];
...
<MTable
title="Table"
data={intakes.intakes}
columns={columns}
options={{
columnsButton: true,
pageSize: 10,
pageSizeOptions: [10, 15, 25, 50, 100],
paginationType: "stepped",
padding: "small",
filtering: true,
/>
follow this https://codesandbox.io/s/material-table-with-hidden-columns-cndj4?file=/package.json:250-256
i downgraded the version to 1.57.2 and its working fine now

Cytoscape - graph entire screen

i need to render graphs and i want to use cytoscape (plotly dash cytoscape).
Because with the plotly dash wrapper it is possible to write everything in python and i don't need to split my (small) application into a backend and a frontend part.
I want that the graph uses the entire screen and orders the nodes in a good and readable way.
Unfortunately i don't find a description of all possible parameters in the api documentation.
Instead of the rendering in picture i would like to have it in way.
Do you have any idea how to solve this?
The graph has the entire space available, i can move it with my mouse everwhere i want.
These are my current properties:
cyto.Cytoscape(
id='knowledge-graph',
layout={
'name': 'cose',
'idealEdgeLength': 1000,
'nodeOverlap': 500,
'refresh': 20,
'fit': True,
'padding': 30,
'randomize': False,
'componentSpacing': 1000,
'nodeRepulsion': 400000,
'nestingFactor': 5,
'gravity': 800,
'numIter': 1000,
'initialTemp': 200,
'coolingFactor': 0.95,
'minTemp': 1.0
},
style={
"width": "100%",
"height": "calc(100vh - 150px)",
},
stylesheet=[
{'selector': 'edge', 'style': {'label': 'data(label)', 'curve-style': 'haystack',
'haystack-radius': 0,
'width': 5,
'opacity': 0.5,
'line-color': '#a8eae5'}, 'text-wrap': 'wrap'},
{'selector': 'node', 'style': {'label': 'data(label)', 'background-color': '#30c9bc'}, 'text-wrap': 'wrap'},
]
)
Thank you!
You can try using cytoscape-spread layout which first applies a force-directed layout for initial positions and then uses voronoi-based method to spread the nodes in the remaining space. You can check its demos here and here.

How to place single image on multiple pages by jspdf?

I am having html page which contain very lengthy data.
Here, I have to convert html to pdf. I cant able to convert pdf with css by using jspdf
So i have planned. First convert html to png by canvas and then convert png to pdf. I got correct method to do this. I got solution also.
But Problem is After converting png, im not able to place in pdf, Image will be cropped.
This is my code
window.onload = function() {
html2canvas(document.body).then(function(canvas) {
document.getElementById("page1").appendChild(canvas);
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
l = {
orientation: 'p',
unit: 'pt',
format: 'a3',
compress: true,
fontSize: 8,
lineHeight: 1,
autoSize: false,
printHeaders: true
};
var doc = new jsPDF(l, "", "", "");
doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg',0,0)
doc.addPage();
doc.addImage(canvas.toDataURL("image/jpeg"), 'jpeg',0,500, 1000, 1000)
window.location=doc.output("datauristring")
});
}
After converting pdf, I am showing in same tab.
I have tried another method.
Divide html page into two section. First section will be in first page in pdf and remaining will be in second page in pdf. After that, I have to shown in browser.
I am not able to do this.
Anyone Can give solution for this one?
l = {
orientation: 'p',
unit: 'pt',
format: 'a3',
compress: true,
fontSize: 8,
lineHeight: 1,
autoSize: false,
printHeaders: true
};
var doc = new jsPDF(l);
doc.addHTML($('elementHTML'),{format:'png',pagesplit: true}});

Set the page size in Jtable && razor application

I have included a new frame in my HTML-page, in this frame I have a Jtable .
I need to set the default pagesize to 4 to have the included view without scoller.
I made this changes:
options: {
paging: false,
pageList: 'normal', //possible values: 'minimal', 'normal'
pageSize: 4,
pageSizes: [4, 25, 50, 100, 250, 500],
pageSizeChangeArea: true,
gotoPageArea: 'combobox', //possible values: 'textbox', 'combobox', 'none'
messages: {
pagingInfo: 'Showing {0}-{1} of {2}',
pageSizeChangeLabel: 'Row count',
gotoPageLabel: 'Go to page'
}
},
In jquery.jtable.js and jquery.jtable.min.js. But I get always the page size = 10.
So , I need to know
Why the modification that I made wasn't sufficient?
How can I fix page size to 4 ?
I know this question was asked a while ago but I came across this problem myself recently and figured out what was going on..
Basically, jtable stores your preference for row count in a cookie. So if you previously viewed the page with pageSize 10, that's stored and when you change the JavaScript to a different it still picks up the value of 10 and it looks like nothing has changed.
Clear your cookies and it should work for you with the new pageSize.

Categories