i'm using overFlow : linebreak in my program .And it work's fine this is my code ,
styles: {
fillStyle: 'DF',
overflow: 'linebreak',
columnWidth: 110,
lineWidth: 2,
lineColor: [85, 51, 27]
}
But that doesn't reflect inside the beforePageContent , Here is that code ,
beforePageContent: function(data) {
doc.setFontSize(12);
doc.setFont("courier");
doc.text("Process Name :",20 ,15);
doc.setFontStyle('bold');
//doc.overflow('linebreak');
doc.setFontStyle('normal');
doc.text("Description :"+sampData, 20, 30);
},
So how can i use lineBreak inside my beforePageContent block .
The overflow: linebreak; style is only for jspdf-autotable. In the hooks you are using pure jspdf and need to use jspdf methods. There are two functions that you are probably going to be helpful. The first one is doc.getStringUnitWidth("hello") and the second is doc.splitTextToSize("A longer title that might be split", 50).
Example 1:
var strArr = doc.splitTextToSize("A longer title that might be split", 50)
doc.text(strArr, 50, 50);
Example 2:
var str = "A longer title that /n is split";
doc.text(str, 50, 50);
Related
let complexText = new Konva.Text({
x: 0,
y: 0,
text: "🔑 hello World 🤗",
fontSize: 12,
fill: "#003049",
width: stage.width() - 10,
padding: 5,
align: "center",Received output
});
Expected Output:🔑 hello World 🤗
Emoji's are not available in all fonts. Look on the web for lists of emoji fonts such as: https://typography.guru/list/topic/emoji-fonts/.
But be aware that the emoji font maybe will not also provide letter characters - it might just be smileys only. You will have to create text nodes for each of the emojis and the text segments.
I am trying to dynamically get the height of a table in a PDF that I created using jsPDF and js Autotable. I want to add a line of text under the table, but since the table height changes, I can't put a specific Y value for the text line.
My current table script:
let col = ['Header 1', 'Header 2', 'Header 3']
let rows = arrayForTable;
let getTableWidth = 150;
let pageWidth = doc.internal.pageSize.width;
let tableMargin = (pageWidth - getTableWidth) / 2;
let height = 0;
doc.autoTable(col, rows, {
margin: {top: 20, right: tableMargin, left: tableMargin},
startY: 70,
styles: {
halign: 'center',
overflow: 'linebreak',
cellWidth: 'wrap',
valign: 'middle'
},
columnStyles: {
0: {cellWidth: 50},
1: {cellWidth: 50},
2: {cellWidth: 50},
},
headStyles: {
fillColor: [163, 32, 32]
},
didParseCell: function(data) {
if (data.row.index === rows.length - 1) {
data.cell.styles.fillColor = [63, 63, 64];
data.cell.styles.fontStyle = 'bold';
data.cell.styles.textColor = [255, 255, 255];
}
height = data.table.height
}
});
console.log(height)
The console prints undefined. Anyone know how to dynamically add a line of text under this table without having to designate a static Y value like this:
doc.text(25, 40, exampleText);
The table height changes every time because of different data being shown.
I am using jsPDF AutoTable plugin v3.5.6.
Get the cursor position on Y axis using
didDrawPage
which will be precisely after the table.
This worked for me in Angular 2:
let yPos = 0;
pdf.autoTable({
...
didDrawPage: function(data) {
yPos = data.cursor.y;
}
}
jspdf version:
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.14",
Source:
Table height is always 0 #604
From what I understood, you want to add the text under the table. Instead of trying to read the table height, you can read the last cell Y position. What you need to do is like this
let height = 0;
....
didParseCell: function(data) {
...
height = data.cursor.y + data.row.height;
}
....
then you can adjust the position of the text you want to add, for the example I want to add 10 gap between the table and the text
doc.text("exampleText", 25, height + 10);
I have been trying to set the column width for a PDF export in Tabulator. Using http://tabulator.info/docs/4.5/download#pdf and https://github.com/simonbengtsson/jsPDF-AutoTable#styling-options as references, I wrote this code:
table.download("pdf", "data.pdf", {
"orientation":"portrait",
"autoTable":{
"columnStyles": {
"allocated_site_name": {"cellWidth": 20}
},
margin: {
"top": 40,
"right": 20,
"bottom": 20,
"left": 20
}
}
});
However, it seems as though columnStyles is ignored, although margin works.
Am I doing anything wrong?
I am using:
Tabulator 4.5
jspdf 1.3.5
jspdf-autotable 3.0.5
Thank you!
I am using jsPDF along with jsPDF-autoTable to print my HTML table data into the PDF file. However, we have one custom requirement for which I am not able to proceed further. I tried a few options. but it seems to be not working for me.
What I want is, I want to print a rounded rectangle in a particular cell. Something like this.
I tried a few options. Here's is my code.
const doc = new jsPDF('p', 'pt', 'a4');
doc.autoTable({
head: headerdata, // array of arrays
theme: 'grid',
body: bodydata, // arry of arrays
startY: doc.autoTable.previous.finalY,
Padding: { top: 20, right: 15, bottom: 20, left: 25, },
styles: {
lineColor: [220, 220, 220],
lineWidth: 0.5,
overflow: 'linebreak',
},
willDrawCell: (data) => {
if (data.section === 'body' && data.column.dataKey === 2) {
doc.setFillColor(239, 154, 154);
doc.roundedRect(data.cell.textPos.x + 3, data.cell.textPos.y + 3, data.cell.width, data.cell.height, 5, 5, 'FD');
}
},
headStyles: { fillColor: [249, 249, 251], textColor: [34, 34, 34], },
});
doc.save('test.pdf');
Any immediate help would be appreciated.
At the time of writing this comment, i am using the following version of the library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
I recommend using the above version of the jsPDF and simply use function RoundedRect()
See here for more infor: https://artskydj.github.io/jsPDF/docs/jsPDF.html#roundedRect
Example:
This will draw a stroke rounded rectangle.
doc.roundedRect(10, 60, 190, 220, 5, 5, 'S')
I am developing on iOS 9.2 SDK & Titannium SDK v5.1.2.GA.
In my iPad app; there is a product tab page, which has a "Discount" button. When you click it, a Popover with a TextField and Picker is shown like this:
The above is created on the fly. (not using a controller + view).
This works as intended. I wanted to extend this a little further by recording the given discount to a product in alloy.js in a global array variable called Alloy.Globals.ProductDiscounts = []; (so it can be used later).
The way I "capture" the new discount price is by listening to the "hide" event on the picker. Then update the global array.
For debugging purpose, I added a console log to make sure it's getting recorded correctly and then in the Appcelerator Studio console window, I started see this endless output like this:
I had to kill the simulator to stop this weird constant output of nulls.
This is my code so far, any idea why the console window is spazzing out? Also, why isn't my global array isn't getting set? or is it getting set, but I missed the actual console.log entry?
// Subscribe to line discount button click event
lineDiscountButton.addEventListener('click', function(e)
{
// Stop further events
e.cancelBubble = true;
// Create popover
var discountPopover = Titanium.UI.iPad.createPopover({
arrowDirection: Titanium.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT,
orignalPrice: e.source.orignalPrice,
priceButton: e.source.priceButton
});
var discountPopoverView = Titanium.UI.createView({
width: 250,
height: 210
});
// Create discount popover view wrapper
var discountPopoverViewWrapper = Titanium.UI.createView({
top: 10,
left: 10,
right: 10,
bottom: 10,
layout: 'vertical'
});
discountPopoverViewWrapper.add(Titanium.UI.createLabel({
top: 0,
left: 0,
color: '#5C5C5C',
font: {
fontSize: 12
},
text: 'Enter a new Price'
}));
discountPopoverViewWrapper.add(Titanium.UI.createView({
top: 0,
height: 1,
backgroundColor: '#0088CE',
width: '100%'
}));
var discountPrice = Titanium.UI.createTextField({
top: 0,
width: '100%',
height: Titanium.UI.SIZE,
hintText: discountPopover.orignalPrice,
value: discountPopover.orignalPrice,
backgroundColor: '#FFFFFF',
font: {
fontSize: 18,
fontWeight: 'bold'
},
color: '#5C5C5C'
});
discountPopoverViewWrapper.add(discountPrice);
discountPopoverViewWrapper.add(Titanium.UI.createLabel({
top: 10,
left: 0,
color: '#5C5C5C',
font: {
fontSize: 12
},
text: 'Or Select a Discount Percent'
}));
discountPopoverViewWrapper.add(Titanium.UI.createView({
top: 0,
height: 1,
backgroundColor: '#0088CE',
width: '100%'
}));
var discountPercentPicker = Titanium.UI.createPicker({
top: 0,
width: Titanium.UI.FILL,
height: 112
});
var discountPercentValues = [];
for (var i = 0; i <= 100; i++) {
discountPercentValues.push(Titanium.UI.createPickerRow({
title: i +'%'
}));
}
discountPercentPicker.add(discountPercentValues);
discountPercentPicker.addEventListener('change', function(e) {
if (parseInt(e.rowIndex) === 0) {
discountPrice.value = discountPopover.orignalPrice;
} else {
discountPrice.value = (discountPopover.orignalPrice - (discountPopover.orignalPrice * (parseInt(e.rowIndex) / 100))).toFixed(2);
}
});
discountPopoverViewWrapper.add(discountPercentPicker);
// Add discount popover view wrapper to view
discountPopoverView.add(discountPopoverViewWrapper);
// Set popover content view
discountPopover.contentView = discountPopoverView;
// Subscribe to popover hide event
discountPopover.addEventListener('hide', function(e) {
e.cancelBubble = true;
Alloy.Globals.ProductDiscounts[discountPopover.priceButton.sku] = parseFloat(discountPrice.value).toFixed(2);
Alloy.Globals.LiveBasketCollection.executeQuery("UPDATE live_basket SET Price = "+ discountPrice.value +" WHERE Sku = '"+ discountPopover.priceButton.sku +"'");
discountPopover.priceButton.price = Alloy.Globals.DeviceDefaults.CurrencySymbol + discountPrice.value;
discountPopover.priceButton.title = (discountPopover.priceButton.basketQuantity > 0 ? discountPopover.priceButton.basketQuantity +' x ' : '') + discountPopover.priceButton.price;
Titanium.App.fireEvent('redrawBasket');
discountPopover = discountPopoverView = discountPrice = discountPercentPicker = discountPercentValues = null;
console.log(Alloy.Globals.ProductDiscounts);
});
// Show popover
discountPopover.show({
view: lineDiscountButton,
animated: true
});
});
Just as a Question... Why are you cancelling bubbling.
without more of the code base I can only try and make a suggestion.
1) addeventlistener.
lineDiscountButton.addEventListener('click', setupData);
2) setupData
Function setupData(e) {
lineDiscountButton.removeEventListener('click', setupData);
Your code from the inline function.
}
Basically remove the event listener once activated, so add and remove as required.
I don't want to teach you to suck eggs, but to remove an event listener, you have to use exactly the same parameters as adding it. Thus inline function on event listeners are not ideal, although they work separating the code out into its own function is preferable.
Next Alloy globals.... Not good practice. I am guessing you want to have the data only for the duration of the running of the app, and not for future use.
If you need it for future use, you can store the data in properties.
Hope this helps
T.