HTML als PDF speichern

Question

Ich muss in der Lage sein, auf eine Schaltfläche zu klicken und ein modales Fenster als PDF zu speichern. Es muss das Styling und alle Inhalte innerhalb der Div das Modal eingebaut ist.

Ich bin nicht an eine bestimmte Bibliothek gebunden, aber ich muss eine Client-Side-Bibliothek verwenden, um dies zur Arbeit zu bringen. Mein Projekt ist mit ASP.NET MVC & AngularJS gebaut.

Ich benutze pdfMake und html2canvas. Html2canvas nimmt den div-Inhalt und speichert ihn als Canvas, während pdfMake die Leinwand/das Bild aufnimmt und als PDF speichert.

Das funktioniert gut für mein modal, wenn es eine begrenzte Menge von Daten/Aufzeichnungen, in der Regel um 15 ist. Immer mehr Datensätze angezeigt werden, wird das PDF mit nur leeren Seiten gerendert.

Ich bin mir nicht sicher, wie das zu beheben, so dass die PDFs mit allen meinen Daten gerendert werden/generiert werden. Ich denke, es könnte mit dem HTML2Canvas-Teil und nicht unbedingt mit den Daten verwandt sein. Der Code examples vom Entwickler sind mehrere Seiten Text und rendern schnell und korrekt. Das sagt mir, dass ich einige Einstellungen vermisse oder dass es zwischen HTML2Canvas und pdfMake ein Vergleichbarkeitsproblem geben könnte.

Ich habe vorher versucht, jsPDF und anscheinend nicht gut mit CSS. Ich konnte die exportierten Dateien nicht mit dem richtigen Styling speichern.

Ich benutze AngularJS ng-click, um die JS-Methode printHistoricalData() aufzurufen.

Hier ist mein Code, der den HTML-Code derzeit als PDF speichert, wenn nur wenige Datensätze vorhanden sind.

HTML

<button type="button" class="btn btn-default pull-right" ng-click="printHistoricalData()">PRINT</button> 

<div id="historicalDataModal"> 
    <div class="modal-body"> 
      Modal Data Here 
    </div> 
</div> 

Angular/Javascript

function printHistoricalData() { 
    html2canvas(document.getElementById("historicalDataModal"), { 
     onrendered: function (canvas) { 
      var data = canvas.toDataURL("image/png"); 

      var docDefinition = {      
       content: [ 
        { 
         image: data, 
         width: 525, 
         alignment: "center" 
        } 
       ], 
       pageSize: "letter", 
       pageOrientation: "portrait", 
       styles: { 
        footer: { 
         fontSize: 8, 
         alignment: "center", 
         margin: [0, 0, 0, 80] 
     } 
       } 
      }; 
      pdfMake.createPdf(docDefinition).download($scope.selectedGroup.title + ".pdf"); 
     } 
    }); 
} 

Vielen Dank für Ihre Hilfe.

Answer 1

Dies könnte helfen:

$scope.pdfExport = function() { 
    html2canvas($("#Div"), { 
         onrendered: function (canvas) { 
          var doc= new jsPDF("l", "mm", "a4"); 
          var imgData = canvas.toDataURL('image/jpeg', 1.0); 
          doc.addHTML(document.getElementById("Div"), function() { 
           doc.save('file.pdf'); 
          }); 

         } 
        }); 
}; 

oder Sie können diese Zeilen statt doc.addHTML verwenden:

doc.addImage(imgData, 'JPEG', 10, 10, 180, 150); // 180x150 mm @ (10,10)mm 
         doc.save('file.pdf'); 

Mit dem doc.addImage half mir begegnen diesem Problem

UPDATE:

Ich fand diese Antwort auf einen anderen Beitrag wirklich hilfreich https://stackoverflow.com/a/34934497/8466944