我正在使用 pdfmake 让用户填写表单，然后从该表单获取数据并将其转换为 PDF。但问题是当用户输入长文本时文本会离开页面。
我已经尝试设置样式来证明这一点，但这似乎不起作用。
这是我的代码:
<!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>
错误:
在图像中，您可以看到输入的长文本从屏幕上消失了。
有没有办法解决无论用户输入多长时间文本都不会离开屏幕的问题。它转到下一行？
最佳答案
正如@jthoenes 在 2 月 18 日 https://github.com/bpampuch/pdfmake/issues/204 所说，pdfmake 从不打断单词，它只会在出现空格或标点符号时打断。
在此行下方，我附上了一个简单的代码，您可以将其直接粘贴到 pdfmake playground 以进行尝试。您会看到只有空格或标点符号才能满足您的需求。
祝你好运!
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.'
},
]
}
]
}
关于javascript - 使用 pdfmake 库时文本离开页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33096770/