Я пытаюсь преобразовать 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 поддерживает локализацию и многоязычность приложений.
До сих пор неясно, почему он не конвертирует все элементы внутри div, но использование DaTA = document.body дает всю страницу.