jsPDF - Точно захватить html-страницу в PDF

Question

Мне нужна таблица для печати в формате pdf и не отбрасывать css, привязанную к таблице. Я также использую angularjs. Я смотрю по-разному, и я экспериментирую с jsPDF.

На главной странице (rollup.html) у меня есть ссылка, которая должна экспортировать таблицу в формате pdf.

<a style="float: right;" href="genPDF()">PDF TEST</a> 

В JS (rollup.js) внутри контроллера, у меня есть функцию genPDF, которая должна отображать все включено в #testDiv идентификатора.

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) { 
.... 
function genPDF(){ 
    html2canvas(document.getElementById("testDiv"), { 
     onrendered: function (canvas) { 
      var img = canvas.toDataURL("image/png"); 
      var doc = new jsPDF(); 
      doc.addImage(img, 'JPEG',20,20); 
      doc.save('test.pdf'); 
     } 
    }); 
} 
}); 

Конечно, я назначен testDiv в DIV, содержащий таблицу я хочу напечатанный (который находится в route.html)

<div class="content-div" style="overflow: visible;" id="testDiv"> 
.... 
</div> 

У меня есть другая кнопка, которая работает для остальных вкладок с помощью ng-click и транслирует данные из других таблиц, которые были проще, без css. Не уверен, что я должен попытаться распечатать таблицу, используя ng-click и передавая данные таблицы, но со всеми css.

 <li style="float: right;">  
      <button ng-click="printDiv('rollup-tab')">Printer Friendly</button> 
     </li> 

В консоли не было обнаружено ошибок для метода jsPDF, поэтому не знаю, в чем проблема. Любая помощь приветствуется. Спасибо

Answer 1

Я настоятельно рекомендую заглянуть в jsPDF - библиотеку AutoTable на GitHub через этот link. В последнее время я столкнулся с очень похожим сценарием и нашел, что поддерживать CSS в этом случае сложно. Это решение идеально подходит для многих случаев использования и более эффективно и эффективно решает мою проблему, чем полагаться на jsPDF самостоятельно. Надеюсь это поможет!