Разделите большое изображение с помощью вертикальной полосы прокрутки для экспорта в PDF на нескольких страницах - PullRequest
Новая
       9

Разделите большое изображение с помощью вертикальной полосы прокрутки для экспорта в PDF на нескольких страницах

0 голосов
/ 24 октября 2018

Я использую горизонтальное дерево PrimeNG https://www.primefaces.org/primeng/#/tree внутри элемента div для визуализации данных, поступающих от некоторого сервиса, в формате диаграммы. 

 ....
 <div class ="col-11">
 <div id="pTree">
 <p-tree [value]="data" layout="horizontal"></p-tree>
 </div>
 </div>
 ....

И позже экспортирую изображение дерева в PDFиспользуя jspdf и html2canvas: 

 exportPdf() {
 let doc = new jsPDF("l", "mm", "a4");
 var image: HTMLElement = document.getElementById("pTree");
 var divHeight = image.offsetHeight;
 var divWidth = image.offsetWidth;
 var ratio = divHeight/divWidth;
 html2canvas(image).then(function (canvas){
 var width = doc.internal.pageSize.getWidth();
 var height = doc.internal.pageSize.getHeight();
 height = ratio * width;
 var imgData = canvas.toDataURL("image/png");
 doc.addImage(imgData, "JPEG", 0,0, width, height);
 doc.save("pTree.pdf");
 });

Когда данные слишком велики, div получает вертикальную полосу прокрутки, а document.getElementById захватывает только те данные изображения, которые в данный момент видны на экране, а не данные, которые скрыты,Мне нужно захватить все данные изображения внутри div и разделить большое изображение на несколько страниц в PDF без искажения качества изображения.Как я могу этого достичь?Может кто-нибудь, пожалуйста, помогите.

...