Is there any way to center text of table cells with jsPDF? - javascript

I want to make table cells text center during generating PDF using jsPdf. Is there any way to make text align center for pdf using jsPdf(by default it's left aligned).
Thanks and Regards,
Afroz Ali

You could also convert your document into the actual PDF:
const doc = new jsPDF('p','pt','a4');
doc.addHTML(document.body,function() {
doc.save('html.pdf');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<div>
<div style="text-align:center">Hello World</div>
</div>

You can set alignment in option or as a parameter depends how you craeting pdf,and Post the problem with your trial code otherwise you will get negative response.
var doc = new jsPDF('p', 'pt', 'a4');
//Alignment based on page width
doc.writeText(0, 40 ,'align - center ', { align: 'center' });
doc.writeText(0, 80 ,'align - right ', { align: 'right' });
doc.writeText(0, 120 ,'align - left '});
//Alignment based on text container width
doc.writeText(0, 120 ,'align - center : inside container',{align:'center',width:100});

Related

How to align title html div with chart horizontally in highchart?

Consider the following jsfiddle
I am trying to align the gap between title bottom-border and the chart. Preferably the left side and right side of the chart aligns with the left side and right side of title border respectively.
Is there anyway I can do that without hardcoding (my chart width changes relative to screen size)?
You can force the title to have the same width and left offset as the plot area. To make sure it's responsive use the render event:
chart: {
plotBorderWidth: 1,
events: {
render: function() {
var style = this.title.element.style;
style.left = this.plotLeft + 'px';
style.width = this.plotWidth + 'px';
}
}
}
Live working demo: http://jsfiddle.net/kkulig/y3fj6vpq/
API reference:
https://api.highcharts.com/highcharts/chart.events.render
Change these two properties of the title.
left: 77px;
width: 922px;

fabric.js cannot get the text aligned witht the textAlign

I cannot get the textAlign working in fabric.js The fontSize, fontBackground work properly, but not textAlign. Am I missing something?
var canvas = new fabric.Canvas('myCanvas');
$('button.addText').click(function() {
var text = new fabric.Text($(this).siblings().val(), {
textAlign: 'center',
fontSize: 40
});
canvas.add(text);
});
var canvas = new fabric.Canvas('myCanvas');
var align = ["left", "center", "right" , "justify"];
var el = document.getElementById('res');
var txt = 'FabricJS \n is \nAwsome';
var text = new fabric.Text(txt, {
textAlign: 'left', //"left", "center", "right" or "justify".
width:450,
fontSize: 40
});
canvas.add(text);
changeAlign();
function changeAlign(){
var val = align[Math.floor(Math.random() * align.length)];
text.set('textAlign',val);
el.innerHTML = 'Text Alignment : ' +val;
canvas.setActiveObject(text);
canvas.renderAll();
}
canvas {
border : 2px dotted blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<canvas id="myCanvas" width="600" height="300"></canvas><br>
<button onclick='changeAlign()'>Change align</button><p id='res'></p>
#AndreaBogazzi He is right. In Text, box depends on the width of first line, if you want then it will work for multi line texts . Check Snippet.
I guess the main point is that if the text is one line only, fabric will size the text bounding box to the necessary length and there will not be any alignment to do.
If the text is multiline the alignment should work.
The alignment is INSIDE the box and is not the direction where the box grows when the text grows.
It depends on the type of the object. If you have for example IText or Text the alignment will work only in the area of the canvas itself.
For example if you want to align an IText type on the center of the canvas you would use:
canvas.getActiveObject().centerV();
canvas.getActiveObject().setCoords();
canvas.renderAll();
If you want to center the text itself it would apply only to Textbox type, you would then be able to use:
canvas.getActiveObject().textAlign = "center";

Increase the height of JSignature input area

I am using JSignature to accept the signature. How can i increase the default height? I tried giving height to the signature div but not working as expected.
Code:
<div id="signature" style="background-color:#fff9cb;border:0px;height:200px"></div>
How to fix this?
replace this line in jSignature Sample
var $sigdiv = $("#signature").jSignature({ 'UndoButton': true })
to
var $sigdiv = $("#signature").jSignature({ 'UndoButton': true, 'width': 400, 'height': 400 })
I've had trouble altering the size or the line width of the signature box in <div> (capture) and <img> (display) tags. Try modifying the size with jQuery (and make sure you have jSignature.js added to your project):
<div id="mySignatureBox" style="background:#000000; color:#ffffff"></div>
$('#mySignatureBox').jSignature({ lineWidth: 1, width: 700, height: 200 });
It seems you can also use percentage values, this did the job for me:
$('#signature').jSignature({
width: '100%',
height: 250
});

Is there any way to center text with jsPDF?

I'm trying to create a simple pdf doc using javascript. I found jsPDF but I don't figure out how to center text. Is it possible?
Yes it's possible. You could write a jsPDF plugin method to use.
One quick example is this:
(function(API){
API.myText = function(txt, options, x, y) {
options = options ||{};
/* Use the options align property to specify desired text alignment
* Param x will be ignored if desired text alignment is 'center'.
* Usage of options can easily extend the function to apply different text
* styles and sizes
*/
if( options.align == "center" ){
// Get current font size
var fontSize = this.internal.getFontSize();
// Get page width
var pageWidth = this.internal.pageSize.width;
// Get the actual text's width
/* You multiply the unit width of your string by your font size and divide
* by the internal scale factor. The division is necessary
* for the case where you use units other than 'pt' in the constructor
* of jsPDF.
*/
txtWidth = this.getStringUnitWidth(txt)*fontSize/this.internal.scaleFactor;
// Calculate text's x coordinate
x = ( pageWidth - txtWidth ) / 2;
}
// Draw text at x,y
this.text(txt,x,y);
}
})(jsPDF.API);
And you use it like this
var doc = new jsPDF('p','in');
doc.text("Left aligned text",0.5,0.5);
doc.myText("Centered text",{align: "center"},0,1);
This works in the scratchpad on the jsPdf homepage:
var centeredText = function(text, y) {
var textWidth = doc.getStringUnitWidth(text) * doc.internal.getFontSize() / doc.internal.scaleFactor;
var textOffset = (doc.internal.pageSize.width - textWidth) / 2;
doc.text(textOffset, y, text);
}
I have found that the current version of jsPdf supports a parameter 'align' with the function signature like this:
API.text = function (text, x, y, flags, angle, align)
So the following should give you a center-aligned text:
doc.text('The text', doc.internal.pageSize.width, 50, null, null, 'center');
However, at the current point in time, an error is thrown in the library when strict mode is on because a 'var' is missing.
There is an issue and pull request for it, but the fix hasn't made it in:
https://github.com/MrRio/jsPDF/issues/575
Whoever is looking for this, one day, you might be able to use this to make it easier to center text.
WootWoot, just in case you need more layout options, you could also take a look at my pdfmake library
It supports:
text alignments, lists, margins
styling (with style inheritance)
tables with auto/fixed/star sized columns, auto-repeated headers, col/row spans
page headers and footers
font embedding, and a couple of other options
It works on client-side (pure JS) or server-side (an npm module)
Take a look at the playground to see what's possible
Good luck
I had the same problem and a lot of others while creating PDF-Files (e.g. auto-pagebreak, total-pageCount). So i started writing a little lib, which depends on jsPDF but gives you a lot of features in a way you know them (form HTML/CSS and jQuery). You can find it on GitHub. I hope it makes PDF-Creating easier... =)
Based on #Tsilis answer I have snippet out a plugin here https://gist.github.com/Purush0th/7fe8665bbb04482a0d80 which can align the text left, right and center in the given text container width.
(function (api, $) {
'use strict';
api.writeText = function (x, y, text, options) {
options = options || {};
var defaults = {
align: 'left',
width: this.internal.pageSize.width
}
var settings = $.extend({}, defaults, options);
// Get current font size
var fontSize = this.internal.getFontSize();
// Get the actual text's width
/* You multiply the unit width of your string by your font size and divide
* by the internal scale factor. The division is necessary
* for the case where you use units other than 'pt' in the constructor
* of jsPDF.
*/
var txtWidth = this.getStringUnitWidth(text) * fontSize / this.internal.scaleFactor;
if (settings.align === 'center')
x += (settings.width - txtWidth) / 2;
else if (settings.align === 'right')
x += (settings.width - txtWidth);
//default is 'left' alignment
this.text(text, x, y);
}
})(jsPDF.API, jQuery);
Usage
var doc = new jsPDF('p', 'pt', 'a4');
//Alignment based on page width
doc.writeText(0, 40 ,'align - center ', { align: 'center' });
doc.writeText(0, 80 ,'align - right ', { align: 'right' });
//Alignment based on text container width
doc.writeText(0, 120 ,'align - center : inside container',{align:'center',width:100});
maybe... just for easy way, you can read this jsPdf text api doc
doc.text(text, x, y, optionsopt, transform)
where optionspot is an option objet, so, you can do this
{align:"center"}
i.e:
doc.text("Hello Sun", doc.internal.pageSize.getWidth()/2, 10, { align: "center" })
where: doc.internal.pageSize.getWidth() is the page width for pdf sheet
doc.text(text,left,top,'center') can be used to center text. It can be used with array of lines as well but when it is used with array the center does not work right so I have used it in a loop for every object in the array.
var lMargin=15; //left margin in mm
var rMargin=15; //right margin in mm
var pdfInMM=210; // width of A4 in mm
var pageCenter=pdfInMM/2;
var doc = new jsPDF("p","mm","a4");
var paragraph="Apple's iPhone 7 is officially upon us. After a week of pre-orders, the latest in the iPhone lineup officially launches today.\n\nEager Apple fans will be lining up out the door at Apple and carrier stores around the country to grab up the iPhone 7 and iPhone 7 Plus, while Android owners look on bemusedly.\n\nDuring the Apple Event last week, the tech giant revealed a number of big, positive changes coming to the iPhone 7. It's thinner. The camera is better. And, perhaps best of all, the iPhone 7 is finally water resistant.\n\nStill, while there may be plenty to like about the new iPhone, there's plenty more that's left us disappointed. Enough, at least, to make smartphone shoppers consider waiting until 2017, when Apple is reportedly going to let loose on all cylinders with an all-glass chassis design.";
var lines =doc.splitTextToSize(paragraph, (pdfInMM-lMargin-rMargin));
var dim = doc.getTextDimensions('Text');
var lineHeight = dim.h
for(var i=0;i<lines.length;i++){
lineTop = (lineHeight/2)*i
doc.text(lines[i],pageCenter,20+lineTop,'center'); //see this line
}
doc.save('Generated.pdf');
Do this:
First get the page width, get half the page width and use it as the x value, use y value of your choice and pass center as the third param to center your text.
Read more from documentation
let doc = new jsPDF();
let pageWidth = doc.internal.pageSize.getWidth();
doc.text("My centered text",pageWidth / 2, 20, 'center');
This will work fine.
let pdf = new jspdf('p', 'mm', 'a4');
pdf.text("Text to display", pdf.internal.pageSize.getWidth() / 2, 50, null, 'center');
50 is the height i.e. y-axis.
This worked for me:
doc.styles.tableBodyEven = {
alignment: 'center'
}
doc.styles.tableBodyOdd = {
alignment: 'center',
color: '#555555',
fillColor: '#dedede'
}

Centering text field in Titanium Mobile

How do I center a text field in Titanium? Here's the text field code:
var textfield1 = Titanium.UI.createTextField({
color:'#006',
backgroundColor:'#fff',
height:50,
top:'auto',
left:'auto',
width:300,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
If your parent uses a vertical layout, it's auto centered. 'auto' top will be 0 ; remove your left.
You can also use textAlign : 'center' in other layouts.

Categories