Преобразование div в изображение и его печать

166

01 июня 2019, 21:30

Хочу распечатать содержимое div со стилями и т.п. Решил преобразовать содержимое в картинку, а после распечатать. Для преобразования воспользовался библиотекой html2canvas. После этого попытался создать новое окно, поместить туда изображение и вызвать печать.

printTable() {
    let printContents = document.getElementById('results_table');
    html2canvas(printContents).then(function(canvas) {
        let win = window.open();
        win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");
        win.print();
    });
}

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

Если же закрыть диалог печати, то на самой странице изображение будет присутствовать.

Если после этого нажать ctrl+P, то откроется диалог печати, где в предварительном просмотре будет фото и его можно будет без проблем распечатать.

Что я делаю не так? И как можно при вызове функции реализовать задуманное - преобразование содержимого div в изображение и его печать?

Answer 1

Дело в том, что данные добавлялись дольше, чем открывался диалог печати. Сделал функцию асинхронной

printTable() {
    let printContents = document.getElementById('results_table');
    html2canvas(printContents).then(async function(canvas) {
        let win = window.open();
        await win.document.write("<br><img src='"+canvas.toDataURL()+"'/>");
        win.print();
    });
}