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

【问题标题】：to apply word wrap for the long dynamic text为长动态文本应用自动换行
【发布时间】：2018-04-26 21:58:33
【问题描述】：

我正在使用 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，并且有 splitTextToSize(..) 如此处所示 Word wrap in generated PDF (using jsPDF)? 但在我现有的代码中应用相同的内容时感到困惑，就好像您看到上面显示的我的 js 代码 $scope.export 我正在迭代div 获取动态数据，然后调用pdf.save(pdfName)。谁能提供解决方案，在线demo链接也分享一下。

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

【问题讨论】：

是用jspdf必备，可以用html2pdf，看看
是的，我必须使用 jsPDF fromHTML() 方法，即使是 jsPDF 的 addHTML() 方法也有很多缺点，所以我不能使用它。我已经尝试过 html2PDF，它也有自己的缺点。与使用 jsPDF fromHTML() 生成的 PDF 相比，PDF 的质量较差，甚至 html2PDF 也无法识别少数 css 元素。 jsPDF fromHTML() 支持使用 splitTextToSize(..) 自动换行，但我无法弄清楚如何在我现有的代码中应用它。任何输入？ @Sagar Bhattacharya
我需要检查
当然，谢谢。我找到了这个链接stackoverflow.com/questions/24272058/…。共享链接中很少有答案很好，但无法将相同的答案应用于上面 js 代码中显示的动态数据。 @Sagar Bhattacharya
嘿@user7833845 我为您发布了一个解决方案，请实施并测试该解决方案是否适合您

标签： javascript jquery html jspdf word-wrap

【解决方案1】：

好吧，我为您的解决方案提供了一个快速解决方法，我们可以设置页面宽度，然后将长文本打印在 pdf 中并且没有内容从 pdf 中中断，只需将您在 script.js 中的选项更新为这个：

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

这将为您完成工作

【讨论】：

太棒了，它奏效了。谢谢。我在这里提出了另一个问题，如果可能，请检查以下内容stackoverflow.com/questions/47311531/…@Sagar Bhattacharya

【解决方案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
});

【讨论】：