Блог

Главная - Вопросы по программированию - HTML в основном содержимом АВТОТАБЛИЦЫ JSPDF

HTML в основном содержимом АВТОТАБЛИЦЫ JSPDF

#jspdf-autotable

#jspdf-автотаблица

Вопрос:

Здравствуйте, я пытаюсь настроить свой PDF-документ. Я использую Javascript непосредственно для его создания.

 doc.autoTable({
head: [['Name', 'Email', 'Country']],
body: [
['${MyVariable1}', '${MyVariable2}', '${MyVariable3}'],
],
})

Но теперь одна из моих переменных имеет содержимое HTML… как я могу добавить его в тело и прочитать как HTML?

Возможно ли это?

Заранее спасибо

Ответ №1:

Это невозможно реализовать с jspdf autotable помощью библиотеки. Но я создал другое возможное решение, которое решает вашу проблему.

Сначала вам нужно создать свою таблицу. Я использовал jquery, но вы можете использовать для этого ванильный js:

 <!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>

</body>
<footer>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">

        var response = [
            {
                "Name":"test",
                "Email":"test@example.com",
                "Country":"Canada"
            },
            {
                "Name":"test2",
                "Email":"test2@example.com",
                "Country":"<div style='color: red'>USA</div>"
            }
        ];

        $(function() {
            var $table = $('<table>');
            var $tbody = $('<tbody>');
            var $thead = $('<thead>');
            $.each(['Name', 'Email', 'Country'], function(i, item) {
                $thead.append(
                    $('<th>').html(item),
                )
            });
            $table.append($thead);
            $.each(response, function(i, item) {
                $('<tr>').append(
                    $('<td>').html(item.Name),
                    $('<td>').html(item.Email),
                    $('<td>').html(item.Country)
                ).appendTo($tbody);
            });
            $table.append($tbody)

            $.ajax({
                type: "POST",
                url: 'http://localhost:3000/convert',
                data: {
                    htmlBody: $table.prop('outerHTML')
                },
                complete: function (status) {
                    window.open('http://localhost:3000/download')
                },
                dataType: 'json'
            });
        });
    </script>

</footer>
</html>

После этого вы можете создать простой сервер node js, который преобразует ваш HTML-код в pdf:

 var express = require('express');
var cors = require('cors');
var app = express();
var port = 3000

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

var pdf = require('html-pdf');
var fs = require('fs');


app.post('/convert', function(req, res, next) {
    pdf.create(req.body.htmlBody).toStream(function(err, stream){
        stream.pipe(fs.createWriteStream('./test.pdf'));
        res.send(200)
    });
});

app.get("/download", function (req, res) {
    res.download("./test.pdf");
});


app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
});

Комментарии:

1. Спасибо за ваш ответ… в этом случае я бы предпочел изменить всю структуру своего кода и сделать его полным HTML и продолжать использовать jspdf autotable… дело в том, что у меня есть большой большой PDF-файл … и только одна переменная содержит HTML-код, поэтому мне было интересно, есть ли какие-либо решения… Еще раз спасибо!!