Блог

Главная - Вопросы по программированию - Преобразование текущей HTML-страницы в PDF

Преобразование текущей HTML-страницы в PDF

#html #node.js #angular

#HTML #node.js #angular

Вопрос:

Я использую библиотеку 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, но стиль отсутствует. Кто-нибудь может подсказать мне какое-нибудь хорошее решение. Застрял со вчерашнего дня на этом

Комментарии:

1. отображается ли кнопка в PDF?

Ответ №1:

Поскольку одним из тегов является Angular, я бы предложил использовать windows.print(). Это работает в Angular 5.

Ответ №2:

Вы можете использовать pdfmake библиотеку, чтобы создать простой и быстрый способ создания PDF-файла из Html

  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>