I use jsPDF to generate PDF but somehow, the margin that I've set on it seems not working for pagesplit.
I tried this method but not working as well (when it comes to second page, the margin is not working): Jspdf addHTML pagesplit option is stretching the pages
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.internal.scaleFactor = 2.25;
pdf.addHTML(document.querySelector('#print'), 0, 0, {
pagesplit: true,
margin: {
top: 50,
right: 25,
bottom: 50,
left: 25,
useFor: 'page'
}
},function () {
pdf.save('print.pdf');
});
*tried this method too:
pdf.addHTML(document.querySelector('#print'), 25, 50, {
pagesplit: true,
margin: {
top: 50,
right: 25,
bottom: 50,
left: 25,
useFor: 'page'
}
},function () {
pdf.save('print.pdf');
});
Below is the result:
Related
const handlePrint = () => {
var doc = new jsPDF('l', 'pt', 'a4');
doc
.html(document.querySelector('#content'), {
width: 1920,
height: 1280,
windowHeight: 1280,
windowWidth: 1920,
margin: [50, 0, 50, 0],
html2canvas: {scale: 0.6},
})
.then(() => {
doc.save('Calendar.pdf');
});
};
The text of a column in my table is required to render as HTML but the table can't render it, the following code is the way I'm generating the PDF:
var doc = new jsPDF({ format: 'a4', unit: 'px' });
doc.setFontSize(10);
var alignOption: any = { align: 'left' };
if (company) doc.text(`Company: ${company}`, 10, 15, alignOption);
if (division) doc.text(`Division: ${division}`, 10, 30, alignOption);
autoTable(doc, {
styles: { fontSize: 5 },
columnStyles: { 5: { cellWidth: 200 } },
margin: { top: 40, bottom: 40 },
head: [Object.keys(data[0])],
body: formatedData,
foot: [['total', '500']],
});
doc.save('hourlyReport.pdf');
The following image is the result I get:
Is there a way I can render the marked information as HTML?
I have series legends as scrollbar as demo-ed in this fiddle
http://jsfiddle.net/BlackLabel/kb4gu5rn/
How can I draw series legend marker ("circle"/"square"/"diamond" etc..) instead of line
var $line = $('<div>')
.css({
width: 16,
position: 'absolute',
left: -20,
top: 8,
borderTop: '2px solid ' + (series.visible ? series.color :
options.itemHiddenStyle.color)
})
.appendTo($legendItem);
Also upon hover in this legendItemList I would like to trigger the mouseOver event on the series.. To highlight the series(or data points) in the chart for easy co-visualization
I added this handler, but it doesnt work
$legendItem.hover(function () {
series.onMouseOver();
});
Thanks for your help
You can use Highcharts.SVGRenderer class to add a specific legend marker symbol.
To highlight the series use setState('hover):
var chart = Highcharts.chart({...},
function(chart) {
var options = chart.options.legend,
legend = chart.legend;
/**
* What happens when the user clicks the legend item
*/
function clickItem(series, $legendItem, symbolLine, symbolSVG) {
series.setVisible();
$legendItem.css(
options[series.visible ? 'itemStyle' : 'itemHiddenStyle']
);
symbolLine.attr({
stroke: series.visible ? series.color : options.itemHiddenStyle.color
});
symbolSVG.attr({
fill: series.visible ? series.color : options.itemHiddenStyle.color
});
}
// Create the legend box
var $legend = $('<div>')
.css({
width: 110,
maxHeight: 210,
padding: 10,
position: 'absolute',
overflow: 'auto',
right: 10,
top: 40,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
borderStyle: 'solid',
borderRadius: options.borderRadius
})
.appendTo(chart.container);
$.each(chart.series, function(i, series) {
// crete the legend item
var $legendItem = $('<div>')
.css({
position: 'relative',
marginLeft: 20
})
.css(options[series.visible ? 'itemStyle' : 'itemHiddenStyle'])
.html(series.name)
.appendTo($legend);
// create the line with each series color
var symbolEl = $('<div>');
var renderer = new Highcharts.Renderer(
symbolEl[0],
16,
10
);
var symbolLine = renderer
.path([
'M',
0,
5,
'L',
16,
5
])
.attr({
'stroke-width': 2,
stroke: series.color
})
.add();
var symbolSVG = renderer.symbol(
series.symbol,
3,
0,
10,
10,
Highcharts.merge(series.options.marker, {
width: 10,
height: 10
})
).attr({
fill: series.color
})
.add();
symbolEl.css({
position: 'absolute',
left: -20,
top: 2
}).appendTo($legendItem);
// click handler
$legendItem.hover(function() {
chart.series.forEach(function(s) {
if (s !== series) {
s.setState('inactive');
} else {
series.setState('hover');
}
});
}, function() {
chart.series.forEach(function(s) {
s.setState('normal');
});
});
$legendItem.click(function() {
clickItem(series, $legendItem, symbolLine, symbolSVG);
});
});
});
Live demo: http://jsfiddle.net/BlackLabel/mfvh9ubq/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#setState
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#symbol
I'm using jspdf-autotable on angular 4.
The line width is wrong when there is an overflow of content. I will like to use long content on my table but the breakline doesn't work right. What can i do????
There is my source code
doc.autoTable(colonnes, rows, {
theme: 'striped',
styles: {
fillColor: [10, 10, 20],
overflow: 'linebreak',
fontSize: 15,
rowHeight: 20,
columnWidth: 'wrap',
theme: 'striped',// 'striped', 'grid' or 'plain'
startY: false, // false (indicates margin top value) or a number
pageBreak: 'auto', // 'auto', 'avoid' or 'always'
tableWidth: 'wrap', // 'auto', 'wrap' or a number,
showHeader: 'firstPage', // 'everyPage', 'firstPage', 'never',
tableLineColor: 200, // number, array (see color section below)
tableLineWidth: 2,
},
tableWidth: 'auto',
columnWidth: 'auto',
columnStyles: {
id: {fillColor: [15, 15,25]},
//1: {columnWidth: 'auto'},
columnWidth: 'wrap',
},
headerStyles: {theme: 'striped'},
margin: {top: 60},
addPageContent: function(data) {
doc.text(nom + ' Nombre Total : ' + rows.length, 150, 40);
/*fontSize: 25;
fontFamily: 'vivaldi';*/
}
});
doc.save(nom+now+'.pdf');
In columnStyles add 'overflow: '
Possible values for overflow:
overflow: 'linebreak'|'ellipsize'|'visible'|'hidden' = 'normal'
columnStyles = {
columnId: {
overflow: 'ellipsize'
}
}
I thought it would be fun to check Sproutcore out, but I ran into an error which I cannot seem to figure out. I'm following the recent NetTuts+ tutorial on writing a microblog with the framework. My code is the following:
Microblog.mainPage = SC.Page.design({
mainPane: SC.MainPane.design({
childViews: 'topView postView contentView'.w(),
topView: SC.ToolbarView.design({
childViews: 'appName'.w(),
layout: { top: 0, left: 0, right: 0, height: 40 },
anchorLocation: SC.ANCHOR_TOP,
appName: SC.LabelView.design({
layout: { top: 5, left: 5, width: 100 },
displayValue: "MicroBlog App",
layerId: "mb-logo" // html id attribute
})
}),
postView: SC.View.design({
childViews: 'form'.w(),
layout: { top: 40, height: 75 },
backgroundColor: 'white',
form: SC.View.design({
childViews: 'postContent post'.w(),
layout: { left: 200, right: 200 },
postContent: SC.TextFieldView.design({
layout: { top: 10, left: 10, right: 10, height: 60 },
isTextArea: YES,
hint: "What's on your mind?"
}),
post: SC.ButtonView.design({
layout: { top: 80, right: 10, width: 100 },
title: "Post",
isDefault: YES
})
})
}),
contentView: SC.ScrollView.design({
hasHorizontalScroller: NO,
layout: { top: 135, bottom: 0, left: 0, right: 0 },
contentView: SC.ListView.design({
})
})
})
});
However, for some reason it doesn't load the button and when I click on the page where either my buttonView or contentView goes, I get the following error in my console:
Uncaught TypeError: Cannot call method 'get' of null
I tried googling for it, but no luck. I'm using Sproutcore 1.6.
Thanks
The NetTuts sproutcore app is built on sproutcore 1.4
Sproutcore changes quite significantly between versions. I would assume this is your problem.
Apparently the problem lies in the last part:
contentView: SC.ScrollView.design({
hasHorizontalScroller: NO,
layout: { top: 135, bottom: 0, left: 0, right: 0 },
contentView: SC.ListView.design({
})
})
For some reason, those two views can't have the same name. I changed this to:
contentView: SC.ScrollView.design({
childViews: 'contentListView'.w(), // do i need this here?
hasHorizontalScroller: NO,
layout: { top: 150, bottom: 0, left: 0, right: 0 },
contentListView: SC.ListView.design({
})
})
Seems to work fine now!
You've already solved this problem, but: The error "Cannot call method 'get' of null" in SproutCore is pretty unhelpful on its face, but it usually means there's either a syntax error in the code, or something else is missing in the declaration of, the object you're trying to call get() on. In your case, I think adding the childViews attribute helped, and disambiguating the contentView label was also necessary.