Я попытался создать динамический 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