使用pdfmake库时文本离开页面

时间:2015-10-13 07:37:07

标签: javascript html css pdfmake

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

无论如何,无论文本用户输入多长时间都没有关闭屏幕。它会进入下一行吗?

1 个答案:

答案 0 :(得分:0)

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