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?
Related
I have a need to print a large table with 20+ columns. Is there a way to achieve this without distorting the view.
I have tried setting font size based on the number of columns of the table but unable to achieve that:
doc.autoTable({
styles: {
cellPadding: 0.5,
overflow: 'visible',
cellWidth: 'wrap'
},
columnStyles: {
columnWidth: 'auto'
},
margin: {
left: 5,
right: 5
},
tableLineWidth: 0.5,
head: headers as any,
body: body,
didDrawCell: (data) => {
if (this.length > 5) { // Number of columns
doc.autoTable({
styles: {
fontSize: 1
}
});
}
},
didDrawPage: (data) => {
console.log(data);
}
});
Or is there any other better way to achieve that because currently whatever I try my view is distorted if I show all the columns and if I wrap the columnWidth and cellWidth then only contained element within specified width are shown.
For now I am able to do it by calculating fontSize upFront and passing it as a value in styles object
exportAsPDF(data: Array<any>, fileName: string) {
const headers: Array<Array<string>> = this.setPDFHeader(data);
const fontSize: number = this.calculateFontSize(headers[0].length);
const body: Array<Array<string>> = this.setPDFBody(data);
const doc = new jsPDF();
doc.autoTable({
styles: {
cellPadding: 0.5,
fontSize: fontSize
},
headStyles: {
fillColor: '#3f51b5',
textColor: '#fff',
halign: 'center'
},
bodyStyles: {
halign: 'center'
},
margin: {
left: 5,
right: 5
},
tableLineWidth: 1,
head: headers as any,
body: body
});
doc.save(fileName);
}
setPDFHeader(data: Array<any>): Array<Array<string>> {
return [
Object.keys(data[data.length - 1]).map(
(item) => `${item.charAt(0).toUpperCase()}${item.substr(1, item.length)}`
)
];
}
setPDFBody(data: Array<any>): Array<Array<string>> {
return data.map((item) => {
const keys = Object.keys(item);
const values = [];
keys.forEach((key) => {
values.push(item[key]);
});
return values;
});
}
calculateFontSize(count: number): number {
return count ? tableWidth / count : count;
}
I tried to export 15 columns with jsPDF autoTable, but the exported table layout is not readable. How can we achieve it?
In my case I had 10 columns and I changed pdf orientation to 'landscape' and styles. Also, if you have long text in columns you need to enable overflow: 'linebreak'.
Here some code example:
const doc = new jsPDF({ orientation: 'landscape' });
doc.text('Transitions', 5, 12);
doc.autoTable({
showHead: 'firstPage',
columns: // your columns,
body: // your rows,
startY: 18,
styles: { overflow: 'linebreak', cellWidth: 'wrap', cellPadding: 1, fontSize: 6 },
columnStyles: { text: { cellWidth: 'auto' } }
});
if you need to use linebreak for specific column:
doc.autoTable({
showHead: 'firstPage',
columns: // your columns,
body: // your rows,
startY: 18,
styles: { overflow: 'linebreak', cellWidth: 'wrap', cellPadding: 1, fontSize: 6 },
columnStyles: {
someColumnName1: { cellWidth: 'auto' },
someColumnName2: { cellWidth: 'auto' }
}
});
someColumnName1 - this is dataKey from columns.
Please provide your code or jsfiddle, so we can provide better solution.
I'm generating Charjs graphs in rails with wicked_pdf and wkhtmltopdf (ver 0.12.4). i've updated wkhtmltopdf gem from ver 0.12.3.1 to ver 0.12.4 because it uses a lot of RAM memory and takes too much time when generate long PDFs, but charjs graphs worked. Now, with the new version, occurs an error when responsive chart option is set to false:
When set it to true, there is no errors but it does not work, even if the parent block has width and height setting.
i don't know how to solve this with the newest version of wkhtmltopdf and gem downgrade isn't an option.
pls help.
i've tried by setting width and height to the parent container and chartjs canvas, more javascript_delay in wkhtmltpdf, no animations in charjs, onbeforeprint callback with recomended function by charjs doc
html
<div class="canvas-holder" style="width: 800px; height: 1200px;">
<canvas id="real-costs-bar-chart-1" width="800" height="1200" style="width: 800px; height: 1200px;"></canvas>
</div>
charjs code
var ctx = document.getElementById(canvas_id).getContext('2d');
new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
label: 'Real',
data: data1,
backgroundColor: backgroundColor1,
borderColor: borderColor1,
borderWidth: 1
},
{
label: 'Proyectado',
data: data2,
backgroundColor: backgroundColor2,
borderColor: borderColor2,
borderWidth: 1
}
],
// These labels appear in the legend and in the tooltips when hovering different arcs
labels: labels
},
options:{
title: {
display: true,
text: title,
fontSize: 10,
fontColor: '#00397B',
lineHeight: 3
},
responsive: false,
legend:{
position: 'bottom',
fontSize: 10
},
scales: {
xAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return 'USD ' + number_to_cl(value);
}
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label =
data.datasets[tooltipItem.datasetIndex].label || '',
value =
data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
if (label) {
label += ': ';
}
label += 'USD ' + number_to_cl(value);
return label;
}
}
}
}
})
wicked_pdf config
pdf = WickedPdf.new.pdf_from_string(
template,
pdf: "Report_#{cost_report_type}", javascript_delay: 2000,
header: { content: header, spacing: 10 },
footer: { center: 'Pagina [page] de [topage]', spacing: 5 },
margin: {
top: 35,
bottom: 15
},
encoding: 'UTF-8',
zoom: 0.8,
orientation: 'Portrait'
)
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'
}
}
Code is as below
chart: {
type: "funnel",
marginBottom: 25,
backgroundColor: "transparent",
events: {
load: function() {
var chart = this;
Highcharts.each(chart.series[0].data, function(p, i) {
chart.options.labels.items.push({
html: "less confident" + i,
style: { left: 550, top: 50 }
});
p.dataLabel.attr({
x: (chart.plotWidth - chart.plotLeft) / 2,
"text-anchor": "middle"
});
});
}
}
},
I see that you're trying to add a label for every point. Highcharts has build in functionality for this called data labels: https://api.highcharts.com/highcharts/series.line.dataLabels
Another approach is to use SVGRenderer.label: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label