Question

我正在使用html-pdf库将html转换为PDF。我的HTML为

<div id="newDiv" style="text-align: center;color:royalblue;">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<button type="button" class="btn" (click)="showData()">Basic</button>

当我尝试在该位置将其转换为PDF时，在节点端

。它给了我PDF，但缺少样式。谁能告诉我任何好的解决方案。从昨天开始就卡住了

Answer 1

由于标签之一是Angular，我建议使用windows.print（）。它适用于Angular 5。

Answer 2

您可以使用pdfmake库以简便快捷的方式从HTML生成PDF

 var app = angular.module("app", []);

 app.controller("listController", ["$scope",
   function($scope) {
     $scope.employees = [{
       firstName: "rajeh",
       lastName: "gatla",
       gender: "mgale",
       mobile: "8143445171"
     }, {
       firstName: "sathi",
       lastName: "wesd",
       gender: "madfgle",
       mobile: "8143445171"
     }, {
       firstName: "gjds",
       lastName: "hs",
       gender: "madfhsdfle",
       mobile:"8143445171"
     }];

     $scope.export = function() {
       html2canvas(document.getElementById('exportthis'), {
         onrendered: function(canvas) {
           var data = canvas.toDataURL();
           var docDefinition = {
             content: [{
               image: data,
               width: 500,
             }]
           };
           pdfMake.createPdf(docDefinition).download("test.pdf");
         }
       });
     }
   }
 ]);

<!doctype html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="listController">
    <div id="exportthis">
      <table border='1'>
      <tbody> <tr ng-repeat="emp in employees"> <td>{{emp.firstName}}</td> <td>{{emp.lastName}}</td> <td>{{emp.gender}}</td> <td>{{emp.mobile}}</td> </tr> </tbody>
      </table>
    </div>
    <button ng-click="export()">export</button>
  </div>
</body>

</html>

将当前的HTML页面转换为PDF

2 个答案: