Использование 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 без его отсечения? Любая помощь приветствуется.
Вы когда-нибудь находили лучшее решение? –
Я опустил метод html2canvas и начал использовать pdfmake и установить поля для контента, созданного в формате pdf. Этот метод работает лучше для печати pdf-файлов. – Adrew