2015-10-13 1 views
0

J'utilise pdfmake pour amener les utilisateurs à remplir un formulaire et les données de cette forme est prise et converti en un fichier PDF. Mais le problème est quand un utilisateur tape dans un long texte le texte quitte la page.texte allant hors la page en utilisant la bibliothèque pdfmake

J'ai essayé un style de paramètres pour justifier, mais cela ne semble pas fonctionner.

Voici mon 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> 

ERREUR:

Dans l'image que vous pouvez voir mettre dans un long texte sort de l'écran.

enter image description here

est-il de toute façon de fixer que peu importe combien de temps l'utilisateur de texte entre ne marche pas sortir de l'écran. ça va à la ligne suivante?

+0

Ajoutez 'width' dans' ul' par script que vous utilisez. où est-ce que vous donnez la propriété 'text: z, bold: true, alignement: 'justify', –

Répondre

0

Comme @jthoenes dit le 18 février à https://github.com/bpampuch/pdfmake/issues/204, pdfmake ne rompt jamais les mots, il casse que lorsque vous avez un espace ou Ponctuation.

En dessous de cette ligne Je joins un code simple que vous pouvez coller directement à pdfmake playground afin de l'essayer. Vous verrez que seul l'espace ou la ponctuation répond à vos besoins.

Bonne chance!

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