Html2Canvas рендерит полный контент div - PullRequest
Новая
       8

Html2Canvas рендерит полный контент div

0 голосов
/ 18 апреля 2019

Я пытаюсь использовать html2canvas, чтобы напечатать PDF-файл с содержимым div: 

<div #printSection>
  some content
</div>

У меня есть функция, которая служит этой цели: 

public print(el: ElementRef, name: string, orientation: string = 'l') {
    const doc = new jsPDF(orientation, 'px', 'a4');
    html2Canvas(el.nativeElement).then(
      (canvas) => {
        const img = canvas.toDataURL('image/png');
        const ratio = canvas.height / canvas.width;
        const w = doc.internal.pageSize.width;
        const h = w * ratio;
        doc.addImage(img, 'JPEG', 0, 10, w, h);
        doc.save(name);
      }
    );
  }

, где я передаюэлемент ref в качестве параметра, и он экспортирует свое содержимое в формате PDF.Проблема в том, что это работает нормально, пока я использую большой экран, когда мой экран становится меньше, а div не отображается в целом, но имеет полосы прокрутки по бокам, эта функция не печатает весь контент div, ноограничен видимым разделом.

Есть ли обходной путь для этой проблемы.Мне нужно, чтобы этот отпечаток был независим от экрана, на котором он запущен, потому что это приложение предназначено и для планшетов.

Спасибо за советы.

1 Ответ

0 голосов
/ 28 мая 2019

html2pdf может решить вашу проблему.Он построен поверх jsPDF и html2canvas.https://github.com/eKoopmans/html2pdf.js Попробуйте.

...