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プレビュー内ではなく、コンテンツの半分だけである。
テーブルが作成されたHTMLページ内もちろん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
});
}
});
、私はPDFファイルに登場するコンテンツへのdiv内testDivのIDを持っている。(route.html)
<div class="row" id="testDiv">
....all the table content
</div>
どのように私はそれを切断せずにPDFプレビューに完全なコンテンツを合わせることができますか?どんな助けでも大歓迎です。
もっと良い解決策を見つけたことがありますか? –
私はhtml2canvasメソッドを削除し、pdfmakeの使用を開始し、pdfとして生成されるコンテンツのマージンを設定しました。この方法はpdfsの印刷に適しています。 – Adrew