admin管理员组

文章数量:1419648

I am working on angularjs application with jsPDF API to export the content to the PDF file. I have a issue when the text is long to show in the PDF, when the text is long plete sentence is not shown in the generated PDF as seen in the demo link below. I want to apply word wrap so that all the content is displayed in the PDF file.

Check the online demo here :

Code demo:

 var app = angular.module("app", []);

 app.controller("myController", ["$scope",
   function($scope) {
   
   $scope.export = function() {

       // var pdf = new jsPDF('landscape');
       var pdf = new jsPDF('p','pt','a4');
        var pdfName = 'test.pdf';

        var options = {   pagesplit: true};

        var $divs = $('.myDivClass')                
        var totalDiv = $divs.length -1;     
        var currentRecursion=0;

        function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
            //Once we have done all the divs save the pdf
            if(currentRecursion==totalRecursions){
                pdf.save(pdfName);
            }else{
                currentRecursion++;
                pdf.addPage();
                pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                    recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
                });
            }
        }

        pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
            recursiveAddHtmlAndSave(currentRecursion, totalDiv);
        });
    }
   }
 ]);
<!doctype html>
<html ng-app="app">

<head>
<link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
     
<script src=".2.1.min.js"></script>
<script src=".1.33/vfs_fonts.js"></script>
<script src=".4.1/html2canvas.min.js"></script>
<script src=".3.4/jspdf.min.js"></script>
<script src="//ajax.googleapis/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>

<body>
  <div ng-controller="myController">
        <button ng-click="export()">Export</button>

   <div class="myDivClass" style="background-color:white">

The identity of the longest word in English depends upon the definition of what constitutes a word in the English language, as well as how length should be pared. In addition to words derived naturally from the language's roots (without any known intentional invention), English allows new words to be formed by coinage and construction; place names may be considered words; technical terms may be arbitrarily long. Length may be understood in terms of orthography and number of written letters, or (less monly) 

  </div></div>
</body>

</html>

I am working on angularjs application with jsPDF API to export the content to the PDF file. I have a issue when the text is long to show in the PDF, when the text is long plete sentence is not shown in the generated PDF as seen in the demo link below. I want to apply word wrap so that all the content is displayed in the PDF file.

Check the online demo here : https://plnkr.co/edit/w7fZsdFbbRYctK5tWv5u?p=preview

Code demo:

 var app = angular.module("app", []);

 app.controller("myController", ["$scope",
   function($scope) {
   
   $scope.export = function() {

       // var pdf = new jsPDF('landscape');
       var pdf = new jsPDF('p','pt','a4');
        var pdfName = 'test.pdf';

        var options = {   pagesplit: true};

        var $divs = $('.myDivClass')                
        var totalDiv = $divs.length -1;     
        var currentRecursion=0;

        function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
            //Once we have done all the divs save the pdf
            if(currentRecursion==totalRecursions){
                pdf.save(pdfName);
            }else{
                currentRecursion++;
                pdf.addPage();
                pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                    recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
                });
            }
        }

        pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
            recursiveAddHtmlAndSave(currentRecursion, totalDiv);
        });
    }
   }
 ]);
<!doctype html>
<html ng-app="app">

<head>
<link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
     
<script src="https://ajax.aspnetcdn./ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/pdfmake/0.1.33/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>

<body>
  <div ng-controller="myController">
        <button ng-click="export()">Export</button>

   <div class="myDivClass" style="background-color:white">

The identity of the longest word in English depends upon the definition of what constitutes a word in the English language, as well as how length should be pared. In addition to words derived naturally from the language's roots (without any known intentional invention), English allows new words to be formed by coinage and construction; place names may be considered words; technical terms may be arbitrarily long. Length may be understood in terms of orthography and number of written letters, or (less monly) 

  </div></div>
</body>

</html>

I have checked the API, and there is splitTextToSize(..) as shown here Word wrap in generated PDF (using jsPDF)? but confused to apply the same in my existing code, as if you see my js code shown above $scope.export i'm iterating the div's to get the dynamic data and then called pdf.save(pdfName). Can anyone provide the solution, Online demo link is also shared.

PS:I may have text, images,and any other html tags in my div(myDivClass).

  • javascript
  • jquery
  • html
  • jspdf
  • word-wrap
Share Improve this question asked Nov 14, 2017 at 4:13 user7833845user7833845 832 silver badges12 bronze badges 5
  • is using jspdf necessary, you can use html2pdf, have a look at it – Sagar Commented Nov 14, 2017 at 4:53
  • Yes I have to use jsPDF fromHTML() method, even addHTML() method of jsPDF has many drawbacks so I cannot use it. I already tried html2PDF and it has got its own drawbacks. Poor quality of PDF pared to the one generated using jsPDF fromHTML() and even html2PDF is not recognizing few css elements. jsPDF fromHTML() is supporting wordwrap using splitTextToSize(..) but I could not able to figure it out how to apply in my existing code..Any inputs? @Sagar Bhattacharya – user7833845 Commented Nov 14, 2017 at 5:11
  • i will need to check – Sagar Commented Nov 14, 2017 at 5:17
  • sure, thanks. I found this link stackoverflow./questions/24272058/… . Few answers in the shared link are good but unable to apply the same for my dynamic data shown in the js code above. @Sagar Bhattacharya – user7833845 Commented Nov 14, 2017 at 5:20
  • hey @user7833845 I posted a solution for you , please implement and test if the solution works for you – Sagar Commented Nov 14, 2017 at 17:23
Add a ment  | 

2 Answers 2

Reset to default 4

Well I got a quick workaround for your solution , we can set a width of the page and then the long text gets printed inside the pdf and no content breaks out of the pdf , just update your options in the script.js to this :

var options = {   pagesplit: true,'width': 550}

and this will do the work for you

@Sagar is correct. I just set the width of page dynamicly

var doc = new jsPDF(orientation, 'pt', 'a4', true);// orientation could be 'p' (portrail) or 'l' (landscape)

var a4Width = Number(doc.internal.pageSize.getWidth()); //page width is now based on the orientation

doc.fromHTML($('#yourTarget').html(), 0, 0, {
    pagesplit: true,
    'width': a4Width
});

本文标签： javascriptto apply word wrap for the long dynamic textStack Overflow

版权声明：本文标题：javascript - to apply word wrap for the long dynamic text - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745312523a2653000.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。