将当前 HTML 页面转换为 PDF答案

【问题标题】：Converting current HTML page to PDF将当前 HTML 页面转换为 PDF
【发布时间】：2019-08-04 02:07:06
【问题描述】：

我正在使用 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，但缺少样式。谁能告诉我任何好的解决方案。从昨天开始就卡在这个

【问题讨论】：

按钮是否显示在 pdf 中？

标签： html node.js angular

【解决方案1】：

您可以使用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>

【讨论】：

【解决方案2】：

由于其中一个标签是 Angular，我建议使用 windows.print()。它适用于 Angular 5。

【讨论】：