Comments (13)
simonbengtsson
commented on September 24, 2024
See if the solution in #43 would work for you. I realized now that some of the examples are wrong when using overflow linebreak. Will update them as soon as possible.
from jspdf-autotable.
lobosan
commented on September 24, 2024
Hi Simon, thanks for your quick response. I applied the changes but still not getting it right
var options = {
renderHeader: function (doc, pageCount, options) {
doc.setFontSize(12);
doc.setTextColor(51, 51, 51);
doc.text('Reporte de Fichas de Diagnóstico y Organización', options.margins.horizontal, 45);
},
renderHeaderCell: function (x, y, width, height, key, value, settings) {
doc.setFontSize(10);
doc.setLineWidth(0.1);
doc.setDrawColor(240);
doc.setFillColor(245,245,245);
doc.setTextColor(21, 21, 21);
doc.rect(x, y, width, height, 'B');
y += settings.lineHeight / 2 + doc.internal.getLineHeight() / 2;
doc.text(value, x + settings.padding, y);
},
renderCell: function (x, y, width, height, key, value, row, settings) {
doc.setFontSize(9);
doc.setLineWidth(0.1);
doc.setDrawColor(240);
// Colspan
if (row === 13) {
if (value == 'GRUPO') {
doc.setFontSize(10);
doc.setFillColor(245,245,245);
doc.setTextColor(21, 21, 21);
doc.rect(x, y, doc.internal.pageSize.width - settings.margins.horizontal * 2, height, 'F');
y += settings.lineHeight / 2 + doc.internal.getLineHeight() / 2 - 2.5;
doc.text('INDICADORES DE LA ORGANIZACIÓN', x + settings.padding, y);
}
} else {
doc.setTextColor(51, 51, 51);
doc.rect(x, y, width, height, 'S');
y += settings.lineHeight / 2 + doc.internal.getLineHeight() / 2 - 2.5;
doc.text(value, x + settings.padding, y);
}
},
margins: {horizontal: 40, top: 60, bottom: 40},
overflow: 'linebreak',
overflowColumns: overFlowColumns
};
doc.autoTable(columns, data, options);
from jspdf-autotable.
simonbengtsson
commented on September 24, 2024
The code looks good at a glance. What is the value of the overFlowColumns variable?
from jspdf-autotable.
lobosan
commented on September 24, 2024
Hi Simon,
var overFlowColumns = ["titulo", "organizacion0", "organizacion1", "organizacion2"]
And the data is an array of objects, the image shows console.table(data)
If I don't declare overFlowColumns as part of the options object, is it supposed to apply linebreak to all the columns? is so it doesn't work either :(
from jspdf-autotable.
simonbengtsson
commented on September 24, 2024
Have you tried setting overflowColumns to false?
from jspdf-autotable.
lobosan
commented on September 24, 2024
I just updated the value of overflowColumns = false but linebreak still not working. I'm using meteor and the full code is:
Template.detailOrganizacion.events({
'click .print': function () {
var organizaciones = Session.get('detalleOrganizaciones');
var columns = [{title: '', key: 'titulo'}];
for (var c = 0; c < organizaciones[0].data.length; c++) {
columns.push({
'title': 'Ficha ' + organizaciones[0].data[c],
'key' : 'organizacion' + c
});
}
var overflowColumns = _.pluck(columns, 'key');
var data = [];
for (var i = 1; i < organizaciones.length; i++) {
var temp = {};
temp['titulo'] = organizaciones[i].titulo;
for (var j = 0; j < organizaciones[i].data.length; j++) {
temp['organizacion' + j] = organizaciones[i].data[j];
}
data.push(temp);
if (i == 13) data.push({'titulo': 'GRUPO'});
}
var doc = new jsPDF('l', 'pt', 'a4');
var options = {
lineHeight: 16,
renderHeader: function (doc, pageCount, options) {
doc.setFontSize(12);
doc.setTextColor(51, 51, 51);
doc.text('Reporte de Fichas de Diagnóstico y Organización', options.margins.horizontal, 45);
},
renderHeaderCell: function (x, y, width, height, key, value, settings) {
doc.setFontSize(10);
doc.setLineWidth(0.1);
doc.setDrawColor(240);
doc.setFillColor(245,245,245);
doc.setTextColor(21, 21, 21);
doc.rect(x, y, width, height, 'B');
y += settings.lineHeight / 2 + doc.internal.getLineHeight() / 2;
doc.text(value, x + settings.padding, y);
},
renderCell: function (x, y, width, height, key, value, row, settings) {
doc.setFontSize(9);
doc.setLineWidth(0.1);
doc.setDrawColor(240);
if (row === 13) {
if (value == 'GRUPO') {
doc.setFontSize(10);
doc.setFillColor(245,245,245);
doc.setTextColor(21, 21, 21);
doc.rect(x, y, doc.internal.pageSize.width - settings.margins.horizontal * 2, height, 'F');
y += settings.lineHeight / 2 + doc.internal.getLineHeight() / 2 - 2.5;
doc.text('INDICADORES DE LA ORGANIZACIÓN', x + settings.padding, y);
}
} else {
doc.setTextColor(51, 51, 51);
doc.rect(x, y, width, height, 'S');
y += settings.lineHeight / 2 + doc.internal.getLineHeight() / 2 - 2.5;
doc.text(value, x + settings.padding, y);
}
},
margins: {horizontal: 40, top: 60, bottom: 40},
overflow: 'linebreak',
//overflowColumns: overflowColumns
overflowColumns: false
};
doc.autoTable(columns, data, options);
doc.addPage();
doc.setFontSize(12);
doc.setTextColor(51, 51, 51);
doc.text('Reporte de Fichas de Diagnóstico y Organización', 40, 45);
$('#reporteOrganizacion').each(function (index) {
var imageData = $(this).highcharts().createCanvas();
doc.addImage(imageData, 'JPEG', 0, 65, 800, 500); // imageData, type, x, y, width, height
});
doc.save('Organización.pdf');
}
});from jspdf-autotable.
lobosan
commented on September 24, 2024
Hi Simon, I just copied your example from codepen and it doesn't work. It seems that there is a problem with the meteor version of jsPDF-AutoTable
Template.detailOrganizacion.events({
'click .print': function () {
var columns = [
{title: "ID", key: "id", width: 40},
{title: "Name", key: "name"},
{title: "Country", key: "country"},
{title: "IP-address", key: "ip_address"},
{title: "Email", key: "email"},
{title: "Text (With an extra long title to see that it get correctly overflown and works as well)", key: "text"},
{title: "Text2", key: "text2"}
];
var data = [
{
"name": "Nelson",
"id": 2,
"ip_address": "39.211.252.103",
"country": "Kazakhstan",
"email": "[email protected]",
"text": "This is a text about nothing in particular. It's interesting that it actually gets truncated.",
"text2": "This is a text about nothing in particular"
},
{
"id": 3,
"name": "Garcia",
"country": "Madagas",
"ip_address": "",
"email": "[email protected]",
"text": "This is a text talking about nothing in particular.",
"text2": "This is a text"
},
{
"id": 4,
"name": "Richardson",
"country": "Somalia",
"ip_address": "27.214.238.100",
"email": "[email protected]",
"text": "This is a text about nothing in particular. It's interesting that it actually gets truncated.",
"text2": "This is a text about nothing in particular"
},
{
"id": 5,
"name": "Kennedy",
"country": "Libya",
"ip_address": "82.148.96.120",
"email": "[email protected]",
"text": "Miusov, as a man man of breeding and deilcacy, could not but feel some inwrd qualms",
"text2": "This is a text about nothing in particular"
}
];
var doc = new jsPDF('p', 'pt');
var options = {
renderHeader: function (doc, pageCount, options) {
doc.setFontSize(12);
doc.setTextColor(51, 51, 51);
doc.text('Reporte de Fichas de Diagnóstico y Organización', options.margins.horizontal, 45);
},
renderHeaderCell: function (x, y, width, height, key, value, settings) {
doc.setFontSize(10);
doc.setLineWidth(0.1);
doc.setDrawColor(240);
doc.setFillColor(245,245,245);
doc.setTextColor(21, 21, 21);
doc.rect(x, y, width, height, 'B');
y += settings.lineHeight / 2 + doc.internal.getLineHeight() / 2;
doc.text(value, x + settings.padding, y);
},
renderCell: function (x, y, width, height, key, value, row, settings) {
doc.setFontSize(9);
doc.setLineWidth(0.1);
doc.setDrawColor(240);
// Colspan
if (row === 13) {
if (value == 'GRUPO') {
doc.setFontSize(10);
doc.setFillColor(245,245,245);
doc.setTextColor(21, 21, 21);
doc.rect(x, y, doc.internal.pageSize.width - settings.margins.horizontal * 2, height, 'F');
y += settings.lineHeight / 2 + doc.internal.getLineHeight() / 2 - 2.5;
doc.text('INDICADORES DE LA ORGANIZACIÓN', x + settings.padding, y);
}
} else {
doc.setTextColor(51, 51, 51);
doc.rect(x, y, width, height, 'S');
y += settings.lineHeight / 2 + doc.internal.getLineHeight() / 2 - 2.5;
doc.text(value, x + settings.padding, y);
}
},
margins: {horizontal: 40, top: 60, bottom: 40},
overflow: 'linebreak',
overflowColumns: false
};
doc.autoTable(columns, data, options);
doc.save("table.pdf");
}
});And this is the result
from jspdf-autotable.
lobosan
commented on September 24, 2024
The problem was a deprecated meteor package called chipcastledotcom:jspdf-autotable, I replaced with the official version jspdf:autotable and now it's working
from jspdf-autotable.
simonbengtsson
commented on September 24, 2024
Ah! I should have thought about that... Let me know if you have further issues or feature requests.
from jspdf-autotable.
bpinela
commented on September 24, 2024
@simonbengtsson , is this question resolved ?
I'm with the same problem and i want to know how to solve it
from jspdf-autotable.
simonbengtsson
commented on September 24, 2024
Yes I believe the issue @lobosan was having was fixed by using jspdf:autotable instead of a deprecated meteor version. If you have a similar issue, please post a new issue with a description and sample code etc and I'll take a look at it!
from jspdf-autotable.
bpinela
commented on September 24, 2024
okay simon ! indeed autotable resolved my problem :)
what missed specifically is the "overflow: 'linebreak', overflowColumns: false"
tnks a lot
from jspdf-autotable.
simonbengtsson
commented on September 24, 2024
Hmm, what version are you using? overflowColumns is removed in version 2.x. And in version 1.x I believe overflowColumns: false is the default value?
from jspdf-autotable.
Related Issues (20)
- Memory is not deallocating for autotable. js heap is increasing eventhough for small amount of data HOT 6
- HTML Entities or HEX Code issues for symbols HOT 5
- line breaks are not working
- Change row colors on page break HOT 1
- jspdf Auto Table, can we break the if the lines are more than 10 HOT 1
- (0 , import_jspdf_autotable.default) is not a function HOT 9
- Textfield Signature?
- 表格项合并时表格项与表头信息不对应 HOT 2
- Multitable loop doesn't align properly and creates unusual gaps or overlaps each other HOT 11
- HorizontalPageBreak page break can continue on same page if vertical space is enough HOT 6
- Cannot Read html tags HOT 1
- Merge Cell Inside the body of the table HOT 1
- Parsing HTML with tables HOT 1
- Rowspan on heading HOT 1
- Inconsistent Table Width Across Pages When Exporting Using jsPDF-AutoTable HOT 4
- Table Border is off and value is not displayed when the first column is having large rowSpan. HOT 7
- Some columns are shrinked because of large texts in some columns HOT 2
- I wanted to highlight some part of text in cell text. HOT 1
- How to set specific startY even after page break HOT 1
- Autotable heading or subheading 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 jspdf-autotable.