I am using pdfmake to get users to fill out a form and the data from that form is taken and converted into a PDF. But the issue is when a user types in a long text the text goes off page.
I have tried settings style to justify but that does not seem to work.
Here is my code:
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>my first pdfmake example</title>
<script src='pdfmake.min.js'></script>
<script src='vfs_fonts.js'></script>
</head>
<body>
<input type="text" id="test" name="test">
<textarea id="z" cols="10" rows="5" wrap="hard"></textarea>
<button onclick="pdf()">generate</button>
<script>
// open the PDF in a new window
function pdf() {
var x = document.getElementById("test").value
var z = document.getElementById("z").value
var docDefinition = {
content: [
{
image: 'sampleImage.png',
},
{ ul: [x] },
{
image: 'sampleImage.png'
},
{
ul: [
'Item 1',
'Item 2',
'Item 3',
{
text: z,
bold: true,
alignment: 'justify'
},
],
}
],
styles: {
header: {
fontSize: 18,
bold: true,
alignment: 'justify'
}
}
};
//alert(x);
pdfMake.createPdf(docDefinition).open();
}
</script>
</html>
THE ERROR:
In the image you can see putting in a long text goes off screen.
Is there anyway of fixing that no matter how long the text user enters doesnt go off screen. it goes to the next line?
I am using pdfmake to get users to fill out a form and the data from that form is taken and converted into a PDF. But the issue is when a user types in a long text the text goes off page.
I have tried settings style to justify but that does not seem to work.
Here is my code:
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>my first pdfmake example</title>
<script src='pdfmake.min.js'></script>
<script src='vfs_fonts.js'></script>
</head>
<body>
<input type="text" id="test" name="test">
<textarea id="z" cols="10" rows="5" wrap="hard"></textarea>
<button onclick="pdf()">generate</button>
<script>
// open the PDF in a new window
function pdf() {
var x = document.getElementById("test").value
var z = document.getElementById("z").value
var docDefinition = {
content: [
{
image: 'sampleImage.png',
},
{ ul: [x] },
{
image: 'sampleImage.png'
},
{
ul: [
'Item 1',
'Item 2',
'Item 3',
{
text: z,
bold: true,
alignment: 'justify'
},
],
}
],
styles: {
header: {
fontSize: 18,
bold: true,
alignment: 'justify'
}
}
};
//alert(x);
pdfMake.createPdf(docDefinition).open();
}
</script>
</html>
THE ERROR:
In the image you can see putting in a long text goes off screen.
Is there anyway of fixing that no matter how long the text user enters doesnt go off screen. it goes to the next line?
Share Improve this question asked Oct 13, 2015 at 7:37 SkywalkerSkywalker 5,20417 gold badges66 silver badges127 bronze badges 1-
Add
widthinulby script which you use. where is you give the property `text: z, bold: true, alignment: 'justify', – Mukul Kant Commented Oct 13, 2015 at 7:47
2 Answers
Reset to default 2As @jthoenes said on 18 Feb at https://github./bpampuch/pdfmake/issues/204, pdfmake never breaks words, it only breaks when you have a whitespace or punctation.
Below this lines I have attached a simple code that you can paste directly at pdfmake playground in order to try it. You will see that only withespace or punctuation achieves your needs.
Good luck!
var dd = {
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines',
{
ul: [
'Item 1',
'Item 2',
'Item 3',
{
text: 'thisisatestthisisatestthisisatestthisisatest.thisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatest',
bold: true,
alignment: 'justify',
margin: [10,10,10,10],
width:90
},
],
},
{
text: 'thisisatest.thisisatestthisisatest.thisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatest',
alignment: 'justify',
margin: [0,190,10,80],
width:90
},
{
columns: [
{
width:90,
text: 'thisisatest.thisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatestthisisatest!'
},
{
width: '*',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Malit profecta versatur nomine ocurreret multavit, officiis viveremus aeternum superstitio suspicor alia nostram, quando nostros congressus susceperant concederetur leguntur iam, vigiliae democritea tantopere causae, atilii plerumque ipsas potitur pertineant multis rem quaeri pro, legendum didicisse credere ex maluisset per videtis. Cur discordans praetereat aliae ruinae dirigentur orestem eodem, praetermittenda divinum. Collegisti, deteriora malint loquuntur officii cotidie finitas referri doleamus ambigua acute. Adhaesiones ratione beate arbitraretur detractis perdiscere, constituant hostis polyaeno. Diu concederetur.'
},
]
}
]
}
For information: a word inside a table cell that has a fixed width will be broken if it doesn't fit, even if it has no whitespace or punctuation.
So, if you really need to support such long non-breakable strings, you can always resort to embedding them in a single-cell table with a "noBorders" layout, no padding or margin and a fixed column width.
Obviously that's kind of an ugly hack, unless like me you were already trying to fit those strings in a table, in which case all you have to do is figure out how to determine the column's width in a way that's relevant to your use case.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745246533a4618435.html
评论列表（0条）