2017-02-16 3 views
0

Использование Html2canvas, jsPdf и angularjs, чтобы снять снимок части моей веб-страницы, чтобы показать ее в виде предварительного просмотра в формате pdf. Я смог успешно экспортировать содержимое в pdf, но он показывает только половину содержимого. Что я могу сделать, чтобы исправить это?Html2canvas - только половина содержимого отображается в pdf

Вот кнопка, которая создает pdf-файл. (Rollup.html)

<button ng-click="genPDF()">PDF Test</button> 

В контроллере я использовал функцию html2canvas (rollup.js) Здесь я считаю «document.body.appendChild» может быть ключевым, потому что, когда он раскомментирована он показывает еще одну копию таблицы на веб-странице, когда нажата кнопка «pdfTest», а также в пределах предварительного просмотра pdf, но только половина содержимого.

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) { 

..... 
$scope.genPDF = function(){ 

    html2canvas(document.getElementById("testDiv"), { 
     onrendered: function (canvas) { 

      //document.body.appendChild(canvas); 

      var img = canvas.toDataURL("image/png"); 
      var doc = new jsPDF(); 
      doc.addImage(img, 'JPEG',10,10); 
      doc.save('test.pdf'); 


      //IE 9-11 WORK AROUND 
      if (navigator.userAgent.indexOf("MSIE ") > 0 || 
        navigator.userAgent.match(/Trident.*rv\:11\./)) 
      { 
       var blob = canvas.msToBlob(); 
       window.navigator.msSaveBlob(blob,'Test file.png'); 
      } 

     }, 
     //width: 300, 
     //height: 300 
    });  
} 

}); 

Конечно внутри HTML-страницы, где создается таблица, у меня есть идентификатор testDiv внутри DIV к содержанию Я хочу, появляющегося в формате PDF. (Route.html)

<div class="row" id="testDiv"> 
....all the table content 
</div> 

Как я могу поместить полный контент в предварительный просмотр pdf без его отсечения? Любая помощь приветствуется.

ответ

0

Обнаружено решение, в котором я добавляю параметры в файл doc.addImage.

doc.addImage(img, 'JPEG',10,10,190,200); 

Я не уверен, как сделать изображение 100% страницы PDF, но с этим я могу установить параметры, которые работают лучше всего для таблицы по крайней мере. Надеюсь, я смогу найти лучшее решение, но сейчас это работает.

+0

Вы когда-нибудь находили лучшее решение? –

+0

Я опустил метод html2canvas и начал использовать pdfmake и установить поля для контента, созданного в формате pdf. Этот метод работает лучше для печати pdf-файлов. – Adrew

Смежные вопросы