Estoy trabajando en la aplicación angularjs con la API jsPDF para exportar el contenido al archivo PDF. Tengo un problema cuando el texto es largo para mostrar en el PDF, cuando el texto es largo, la oración completa no se muestra en el PDF generado como se ve en el enlace de demostración a continuación. Quiero aplicar ajuste de texto para que todo el contenido se muestre en el archivo PDF.

Consulte la demostración en línea aquí: https://plnkr.co/edit/w7fZsdFbbRYctK5tWv5u?p=preview

Código de demostración:

 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>

He comprobado la API y hay splitTextToSize (..) como se muestra aquí Word envolver en PDF generado (usando jsPDF)? pero confundido para aplicar lo mismo en mi código existente, como si vieras mi código js mostrado arriba $scope.export estoy iterando los div para obtener los datos dinámicos y luego llamado pdf.save(pdfName). ¿Alguien puede proporcionar la solución? El enlace de demostración en línea también se comparte.

PD: puedo tener texto, imágenes y cualquier otra etiqueta html en mi div (myDivClass).

2
user7833845 14 nov. 2017 a las 07:13

2 respuestas

La mejor respuesta

Bueno, obtuve una solución rápida para su solución, podemos establecer un ancho de la página y luego el texto largo se imprime dentro del pdf y ningún contenido sale del pdf, solo actualice sus opciones en el script.js a esto:

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

Y esto hará el trabajo por ti

3
Sagar 14 nov. 2017 a las 17:22

@Sagar tiene razón. Acabo de configurar el ancho de la página de forma dinámica

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
});
0
Anh Hoang 21 ago. 2019 a las 04:28