Создать PDF из HTML плюс Bootstrap имеет другой дисплей - PullRequest
0 голосов
/ 22 мая 2019

Я попытался создать динамический HTML с рулями, стилизованными с начальной загрузкой 4, а затем преобразовать его в PDF.Bootstrap, кажется, связан с результатом (pdf), я вижу его по некоторым аспектам, таким как шрифт или кнопка.Но есть еще что-то другое, например, название.В html я могу применить класс d-flex, но когда он конвертируется в pdf, у него другое отображение (d-flex не работает).

Сначала я попытался использовать другую библиотеку для преобразования html в pdf.попробуйте использовать библиотеку 'html-pdf', затем я переключусь на библиотеку 'dynamic-html-pdf' и получу тот же результат.

<div class="container">
        <p class="display-4 d-flex justify-content-between border-bottom">
            <span>Document</span>
            <span>No.{{invoice}}</span>
        </p>
        <img src={{imgSrc}} alt="" style='width: 100px'>
        <h1>Account Details</h1>
        <p>
            Username : {{username}} <br>
            Name : {{name}} <br>
            Email : {{email}} <br>
            Plan : <strong>Free</strong>
        </p>
        <button class="btn btn-danger">Hwlo</button>
    </div>
    var handlebars = require('handlebars'); // npm install handlebars
    var pdf =require('html-pdf') // npm install html-pdf
    var fs = require('fs'); // built-in

    // Read template HTML
    var source = fs.readFileSync('./template.html', 'utf8')

    // Create template
    var template = handlebars.compile(source);

    // Actual data for replacing placeholder on html structure above
    var data = {
        "invoice" : "12345",
        "imgSrc" : "https://www.zamzar.com/images/filetypes/pdf.png",
        "username" : "fakeuser",
        "name" : "Fake User",
        "email" : "fakeuser@gmail.com"
    };

    // Join template with data
    var result = template(data);

    // Generate html Synchronously
    fs.writeFileSync("./tmp/html-pdf.html", result);

    // Read HTML, this data will be used by html-pdf
    var html = fs.readFileSync('./tmp/html-pdf.html', 'utf8');

    //  Prepare setting for exporting html to pdf
    var options = { format: 'Letter'};

    // Async operation with callback to generate pdf
    // Not including the callback funtion won't stop us for generating pdf, but will throw an error message
    pdf.create(html, options).toFile('./tmp/html-pdf.pdf', (err, result) => {
        if(err) return console.log(err);

        console.log(result);

    });

Результат для HTML

Результат для PDF

Я ожидаю, что результат будет таким же, как HTML

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...