Question

我正在使用jsPDF API处理angularjs应用程序，以将内容导出到PDF文件。我有一个问题，当文本很长时间显示在PDF中，当文本很长时，完整的句子没有显示在生成的PDF中，如下面的演示链接所示。我想应用自动换行，以便所有内容都显示在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，并且此处显示了Word wrap in generated PDF (using jsPDF)?所示的splitTextToSize（..），但我在现有代码中应用了相同的内容，就好像您看到上面显示的我的js代码$scope.export一样我正在迭代div以获取动态数据，然后调用pdf.save(pdfName)。任何人都可以提供解决方案，也可以共享在线演示链接。

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

为长动态文本

2 个答案: