Сохранение HTML как PDF

Question

Мне нужно, чтобы у вас была возможность нажать кнопку и сохранить модальное окно в формате PDF. Нужно взять стиль и весь контент внутри div, в который встроен модал.

Я не привязан к какой-либо конкретной библиотеке, но мне нужно использовать библиотеку на стороне клиента, чтобы заставить это работать. Мой проект построен с ASP.NET MVC & AngularJS.

Я использую pdfMake и html2canvas. Html2canvas принимает содержимое div и сохраняет его как холст, в то время как pdfMake берет холст/изображение и сохраняет его как PDF.

Это отлично работает для моего модального использования, когда имеется ограниченное количество данных/записей, обычно около 15. В любое время отображается больше записей, PDF-файл отображается только пустыми страницами.

Я не уверен, как это исправить, чтобы PDF-файлы были визуализированы/сгенерированы с использованием всех моих данных. Я думаю, что это может быть связано с частью HTML2Canvas и необязательно с данными. Код examples от разработчика - это несколько страниц текста и рендеринга быстро и правильно. Это говорит мне, что я либо пропускаю некоторые настройки, либо может возникнуть проблема сопоставления между HTML2Canvas и pdfMake.

Я ранее пробовал jsPDF и, по-видимому, не очень хорошо играл с CSS. Я не смог получить экспортированные файлы для сохранения с правильным стилем.

Я использую AngularJS ng-click для вызова метода JS printHistoricalData().

Вот мой код, который в настоящее время сохраняет HTML как PDF, когда есть ограниченные записи данных.

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> 

Угловое/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"); 
     } 
    }); 
} 

Спасибо вам помочь.

Answer 1

Это может помочь:

$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'); 
          }); 

         } 
        }); 
}; 

или вы можете использовать эти строки вместо doc.addHTML:

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

Использование doc.addImage помогла мне противостоять этой проблеме

UPDATE:

Я нашел этот ответ на другом посту действительно полезным https://stackoverflow.com/a/34934497/8466944