Блог

Главная - Вопросы по программированию - Печать таблицы табулятора с использованием Wkhtmltopdf (ошибка: Предупреждение: не определено:0 TypeError: ‘[object EventConstructor]’ не является конструктором )

Печать таблицы табулятора с использованием Wkhtmltopdf (ошибка: Предупреждение: не определено:0 TypeError: ‘[object EventConstructor]’ не является конструктором )

#wkhtmltopdf #tabulator

#wkhtmltopdf #табулятор

Вопрос:

Я пытаюсь преобразовать html, в котором в теле есть таблица табуляторов, но отображается следующая ошибка:

 Warning: undefined:0 TypeError: '[object EventConstructor]' is not a constructor

и wkhtmltopdf не продвигается вперед.

HTML-КОД:

     <!DOCTYPE html>
<html>

<head>
    <link href="https://unpkg.com/tabulator-tables@4.8.4/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.4/dist/js/tabulator.min.js"></script>
    <script>
        Function.prototype.bind = Function.prototype.bind || function (thisp) {
            var fn = this;
            return function () {
                return fn.apply(thisp, arguments);
            };
        };
    </script>
</head>

<body>
    <div id="table"></div>
    <script>
        var tabledata = [
            { id: 1, name: "Oli Bob", age: "12", col: "red", dob: "" },
            { id: 2, name: "Mary May", age: "1", col: "blue", dob: "14/05/1982" },
            { id: 3, name: "Christine Lobowski", age: "42", col: "green", dob: "22/05/1982" },
            { id: 4, name: "Brendon Philips", age: "125", col: "orange", dob: "01/08/1980" },
            { id: 5, name: "Margret Marmajuke", age: "16", col: "yellow", dob: "31/01/1999" },
        ];

        new Tabulator("#table", {
            data: tabledata, //assign data to table
            layout: "fitColumns", //fit columns to width of table (optional)
            columns: [ //Define Table Columns
                { title: "Name", field: "name", width: 150 },
                { title: "Age", field: "age", hozAlign: "left", formatter: "progress" },
                { title: "Favourite Color", field: "col" },
                { title: "Date Of Birth", field: "dob", sorter: "date", hozAlign: "center" },
            ],
        });

        window.status = 'print';
    </script>
</body>

</html>

отлично работает в браузере, но wkhtmltopdf останавливается на:

команда: wkhtmltopdf --debug-javascript --window-status print --enable-local-file-access tabtest.html table.pdf

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

Ответ №1:

Есть ли причина, по которой вы пытаетесь сгенерировать PDF-файл таблицы таким образом? ваш инструмент импорта, вероятно, будет испытывать трудности, потому что Tabulator не создает чистую HTML-таблицу.

В Tabulator встроено несколько функций, которые могут помочь вам лучше получить то, что вы хотите:

Встроенная загрузка в формате PDF

Tabulator поставляется со встроенным загрузчиком PDF файлов который позволяет загружать таблицу в формате PDF с помощью одной простой команды

 table.download("pdf", "table.pdf");

Полную информацию об этом можно найти в документации для загрузки в формате PDF

Печать таблицы

Поскольку Tabulator использует виртуальный DOM, на самом деле существуют только видимые строки таблицы, остальные создаются и уничтожаются при прокрутке, поэтому при печати таблицы вы получите только видимые строки.

Если вы хотите распечатать всю таблицу, вам следует ознакомиться с документацией по печати, в которой рассказывается, как включить стиль печати и отобразить всю таблицу:

 var table = new Tabulator("#example-table", {
    printAsHtml:true, //enable html table printing
    printStyled:true, //copy Tabulator styling to HTML table
});

Экспорт HTML

Если вам просто нужен HTML-эквивалент таблицы getHTML , функция вернет простой HTML-эквивалент таблицы, который вы можете использовать любым удобным для вас способом:

 var htmlTable = table.getHtml();

Полную информацию об этой опции можно найти в документации по экспорту таблицы HTML

Метки: