jsPDF + canvas: экспорт в PDF многостраничной таблицы на русском языке

Генерация PDF… Эта тема не нова, однако порой можно столкнуться с некоторыми тонкостями, в итоге став на тернистый путь велосипедостроения. Сегодня я расскажу, как разрабатывал один такой велосипед.

Мне понадобилось сделать генерацию отчетов в PDF. По ряду причин я решил сделать это на стороне клиента. Беглый поиск предоставил мне выбор между jsPDF и pdfmake. Остановился на первом. А теперь подробнее…



Для начала хочу сказать, что хотя jsPDF и великолепная штука, документация этого проекта местами невменяемая,
что у человека психически неподготовленного вызывает желание ругаться нецензурным матом. Вспоминается документация Symfony: ее читаешь, а потом идешь гуглить с вопросом «а как?» (либо идешь в исходники).

Первый подводный камень, брошенный в мою сторону этой библиотекой, было отсутствие поддержки русского языка (и UTF-8 в целом, насколько мне удалось выяснить).

(pdfmake напротив — умеет работать с UTF-8, однако от использования этой библиотеки я вскоре отказался.)

После поиска и экспериментов решил использовать canvas для отрисовки. Однако здесь обнаружился второй подводный камень: canvas захватывает только текущий экран и моя огромная таблица сохранилась, как набор пустых листов ( а че, экономно).

Пришлось разбивать таблицу скриптом, заносить во временный контейнер, делать из него canvas и по новой. Вот, что получилось в итоге:

app.factory("PDF", function() {
    
    return {
        tableToPDF: function() {
            var pdf = new jsPDF('p', 'pt', 'a4');

            var rows = $("table").find("tr");
            var pdfContainer = $(".tmp-pdf-container");

            var pdfInternals = pdf.internal;
            var pdfPageSize = pdfInternals.pageSize;
            var pdfPageWidth = pdfPageSize.width;
            var pdfPageHeight = pdfPageSize.height;

            var partialSize = 10;
            var contentSize = 0;
            var marginTop = 20;
            var index = 0;

            // создаю новую таблицу каждые partialSize строк
            var generatePartial = function() {
                var partial = "";
                rows.each(function(i, row) {
                    if (i >= index && i <= partialSize) {
                        partial += "<tr>" + $(this).html() + "</tr>";
                        index++;
                        if (index >= partialSize) {
                            partialSize += 10;
                            return false;
                        }
                    }
                });

                return partial;
            }

            var processCanvases = function() {
                if (index >= rows.length) {
                    pdfContainer.html("");
                    //pdf.output("datauri");
                    pdf.save("TEST.pdf");
                    return;
                }

                var partial = generatePartial();

                // generate table with that rows
                var table = $(document.createElement("table"));
                table.append("<tbody>" + partial + "</tbody>");    

                // insert table to temporary div
                pdfContainer.html("<table class='table table-fixed-width table-condensed'>" + table.html() + "</table>");
                // hide unnecessary columns
                pdfContainer.find(".non-printable").css("display", "none");

                // generate canvas from that table
                html2canvas(pdfContainer, {background: "white"}).then(function(canvas) {
                    // contentSize подбирал экспериментально
                    // на формате а4 у меня умещается несколько partial,
                    // поэтому жду, пока дойдет до конца страницы и только затем создаю новую
                    if (contentSize < 2) {
                        contentSize ++;
                        pdf.addImage(canvas, "jpeg", 20, marginTop, pdfPageWidth-40, 0);
                        // формулу и коэффициент подобрал экспериментально
                        // у меня 0.01 работает, тут 0.05, пока не разобрался, как правильно это вычислить
                        marginTop += canvas.height/ (canvas.width / pdfPageHeight + (pdfPageWidth / pdfPageHeight) - 0.05);
                    } else {
                        pdf.addImage(canvas, "jpeg", 20, marginTop, pdfPageWidth-40, 0);
                        // эта проверка нужна, чтобы не создать лишнюю пустую страницу в конце
                        if (index < rows.length) {
                            pdf.addPage();
                        }
                        contentSize = 0;
                        marginTop = 0;
                    }
                    // next iteration
                    processCanvases();
                });
            }

            processCanvases();

        }
    }
});

<div class="tmp-pdf-container" style="position: absolute; left: -9999; width: 1000px"></div>

Отдельно хочу упомянуть формат PNG. Штука хорошая (насколько я знаю, он поддерживается старыми браузерами, в отличие от image/jpeg), но PDF утяжеляет в разы. Вдобавок на больших отчетах браузер гарантированно ляжет, конкретно у меня хром выбрасывал окно ошибки, а ФФ вообще укладывал себя и систему, поэтому спасала только кувалда.

Когда стал генерировать в JPEG, у меня получался афро черный фон. Оказалось, что прозрачность JPEG делает афро черным.

также, html2canvas, не умеет генерировать canvas из кода, поэтому нужно создавать какой-нибудь временный элемент. Плюс он не отрисовывает невидимые элементы. Где-то на stackoverflow советовали iframe, лично я добавил div с position:absolute и left:-9999, чтобы не мешал (правда, на планкере не получилось загнать за экран)

Также возникает сложность при нарезке таблицы: колонки разные. Я это вылечил, добавил следующий стиль:

 .table-fixed-width {
    table-layout: fixed;
}

Вот сам пример: plnkr.co/edit/r3BaDwHpK5H9giwpqrBb

Заключение: писать велосипеды — не всегда плохо. Нередко это помогает узнать что-то новое. Однако это не должно становиться привычкой, поэтому всегда нужно читать доки, хотя бы для того, чтобы слегка попсиховать.

Надеюсь, что эта статья кому-то поможет, а также надеюсь услышать ваши советы и идеи.