Я пытаюсь напечатать содержимое из тега HTML div, пока здесь все в порядке, поэтому я делаю с библиотекой fabricJS, что пользователь может написать текст или добавить изображение на моей странице.
Но, когда я пытаюсь напечатать это содержимое на своей странице, тег div от hello world (hola mundo на испанском языке) до раздела canvas, я получаю ошибку, потому что предварительный просмотр распечатка с моего навигатора выполняется белым цветом и не работает с содержанием canvas.
HTML
<div class="card mb-3 shadow p-3 mb-5 bg-white rounded">
<div class="container" id="print-section">
¡Hola Mundo!
<canvas id="myCanvas" width="400px" height="100px" style="border:solid;">
Hola Mundo!
</canvas>
</div>
<hr>
<div class="form-row">
<div class="col-md-6">
<button class="btn btn-primary btn-block" (click)="print('printSectionId')">Print</button>
</div>
<div class="col-md-6">
<button class="btn btn-success btn-block" (click)="inciarCanvas()">Start</button>
</div>
</div>
</div>
Машинопись / Угловая
canvas: any;
constructor() { }
print(): void {
let printContents,
popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<style>
</style>
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}
ngOnInit() {
this.canvas = new fabric.Canvas('myCanvas', );
this.canvas.add(new fabric.IText('¡Just write!'));
fabric.Image.fromURL('https://assets-cdn.github.com/images/icons/emoji/unicode/1f47d.png', (image) => {
image.set({
left: 50,
top: 70,
});
this.canvas.add(image);
});
}
Примечание: Если я нажму клавишу ctrl + p, на нем будет показано все содержимое моей страницы, включая холст и весь контент (текст и марсианский рисунок), и я не смогу добавить изображение, чтобы быть более понятным в моей необходимости (для репутации).
Что я могу сделать, чтобы найти решение для моей проблемы или что я делаю не так?
¡Спасибо!