为长动态文本应用自动换行

Question

我正在使用 jsPDF angularjs 应用程序 API 将内容导出到 PDF 文件。我有一个问题，当文本很长以显示在 PDF 中时，当文本很长时，完整的句子不会显示在生成的 PDF 中，如下面的演示 link 所示。我想应用自动换行，以便所有内容都显示在 PDF 文件中。

在此处查看在线演示：https://plnkr.co/edit/w7fZsdFbbRYctK5tWv5u?p=preview

代码演示：

 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="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
     
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.33/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="//ajax.googleapis.com/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 compared. 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 commonly) 

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

</html>

我已经检查了 API，这里有 splitTextToSize(..) Word wrap in generated PDF (using jsPDF)? 但是我很困惑在我现有的代码中应用它，就好像你看到我的 js 代码一样在 $scope.export 上方，我正在迭代 div 以获取动态数据，然后调用 pdf.save(pdfName)。谁能提供解决方案，在线演示link也分享了。

PS：我的 div(myDivClass) 中可能有文本、图像和任何其他 html 标签。

Answer 1

好吧，我为您的解决方案找到了一个快速的解决方法，我们可以设置页面的宽度，然后在 pdf 中打印长文本，并且没有内容从 pdf 中分离出来，只需在 script.js 到这个 :

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

这将为您完成工作

Answer 2

@Sagar 是正确的。我只是动态设置页面宽度

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
});

为长动态文本应用自动换行

to apply word wrap for the long dynamic text

html

javascript

jquery

word-wrap

jspdf