Как я могу использовать html2canvas с большими страницами? - PullRequest
Новая
       7

Как я могу использовать html2canvas с большими страницами?

1 голос
/ 15 апреля 2020

Я пытаюсь использовать html2canvas для захвата небольшого элемента html, чтобы преобразовать его в файл PDF с pdf js. Это работает, когда страница небольшая, но когда я начинаю добавлять контент на страницу, html2canvas будет захватывать только белый экран вместо элемента. Это просто страница, которая становится больше, а не элемент, который я пытаюсь захватить. Пример кода предоставляется. Я использую Angular 8.

Машинопись: 

import { Component, OnInit } from '@angular/core'
import * as jspdf from 
  'jspdf'
import html2canvas from
  'html2canvas'


@Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.css'],
})
export class ExampleComponent implements OnInit {
    constructor(){}

    ngOnInit() {}

      createPDF() {
        let foo = document.getElementById('foo-element')
        html2canvas(foo).then(
          canvas => {
            const contentDataURL = canvas.toDataURL()
            let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF  
            var position = 0;  
            pdf.addImage(contentDataURL, 'PNG', 0, position, canvas.width, canvas.height) 

            pdf.save('foo.pdf')
          }
        )
      }

}

Рабочая HTML: 

<div>
    <div (click)="createPDF()" >Download</div>

    <div class="foo-container">
        <div id="foo-element">
            <h1>Some Heading</h1>
            <p>Some text</p>
        </div>
    </div>
</div>

Это сломается, если вы сейчас добавите абзац с действительно долго Lorem Ipsum перед содержанием, как это: 

<div>

    <p> *Insert really long Lorem Ipsum here* </p>

    <div (click)="createPDF()" >Download</div>

    <div class="foo-container">
        <div id="foo-element">
            <h1>Some Heading</h1>
            <p>Some text</p>
        </div>
    </div>
</div>
...