Как установить поля для html2canvas для всей страницы?

Я пытаюсь преобразовать html в pdf и сохранить его. Я использую для этого jsPDF и htmlToCanvas. Я устанавливаю div на всю страницу и воспринимаю его как элемент. Печатается только таблица. Я не вижу ни заголовка, ни блока div под таблицей. Я могу все испортить и попытаться сложить в таблицу, но я бы предпочел не работать так грязно. Как убедиться, что вся страница будет напечатана? Или как я могу добавить несколько значений в ДАННЫЕ?

HTML-страница:

<div *ngIf = "order" id = "pdfOrder" #pdfOrder>
<app-client-info></app-client-info>

    <table id = "productTable">
        <thead>
      values
        </thead>
      
        <tbody>
       values
        </tbody>   
      
      </table>

      <div class  = "costbox">
       values
              <div>
                <button (click) = "goback()">Back</button>
                <button (click) = "confirmOrder()">Confirm</button>
              </div>
      </div>



</div>

соответствующий код в файле ts:

  @ViewChild('pdfOrder') pdfOrder!: ElementRef;


  confirmOrder(): void {

    let DATA: any = document.getElementById('pdfOrder');
    html2canvas(DATA).then((canvas) => {
      let fileWidth = 208;
      let fileHeight =100; //(canvas.height * fileWidth) / canvas.width;
      const FILEURL = canvas.toDataURL('image/png');
      let PDF = new jsPDF('p', 'mm', 'a4');
      let position = 0;
      PDF.addImage(FILEURL, 'PNG', 0, position, fileWidth, fileHeight);
      PDF.save('test.pdf');
    })

    this.salesproductService.submitOrderedItems(this.order);
    this.router.navigate(["/main"]);
  }

Html, который должен быть напечатан:

скриншот вывода:

🤔 А знаете ли вы, что...
Angular поддерживает локализацию и многоязычность приложений.


79
2

Ответы:

Решено

До сих пор неясно, почему он не конвертирует все элементы внутри div, но использование DaTA = document.body дает всю страницу.


До сих пор не ясно, не печатаются ли элементы из-за некоторого поля вверху.

margin-top:-50px 

попробуйте этот стиль в верхнем div и посмотрите, есть ли у вас какие-либо изменения в outout, если изменения видны тогда, это из-за проблемы с маржей.