使用 pdfmake 库时文本脱离页面

问题描述 投票：0回答：2

我正在使用 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>

错误：

在图像中，您可以看到输入长文本会超出屏幕。

enter image description here

有没有办法修复，无论用户输入多长时间的文本都不会离开屏幕。它转到下一行吗？

javascript html css pdfmake
2个回答
2
投票

正如 @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.'
                },
            ]
        }
    ]
}
0
投票

仅供参考：表格单元格内具有固定宽度的单词如果不适合，即使没有空格或标点符号，也会被破坏。

因此，如果您确实需要支持如此长的不可破坏的字符串，您始终可以将它们嵌入到具有“noBorders”布局、无填充或边距以及固定列宽的单单元格表格中。

显然，这是一种丑陋的黑客行为，除非像我一样，您已经尝试将这些字符串放入表格中，在这种情况下，您所要做的就是弄清楚如何以与您的用例相关的方式确定列的宽度.

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.