CSS / html-pdf issue: Overflow of page

Question

I have the following very simple HTML.

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Test</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
        </div>
    </div>
</div>
</body>
</html>

Using html-pdf, I want to produce an A4 PDF file out of the HTML.

let data;

var fs = require('fs');
var pdf = require('html-pdf');
var html = fs.readFileSync('test.html', 'utf8');
var options = { format: 'A4' };

pdf.create(html, options).toFile('test.pdf', function(err, res) {
    if (err) return console.log(err);
    console.log(res);
});

As a result I get a PDF file but it looks like the HTML is cut off.

How can I solve it?

score 0 · Answer 1 · edited Dec 29 '20 at 08:03

0

You could try container-fluid instead of container.

container-fluid takes up the full width of the viewport and is flexible.

container on the other hand takes width with respect to the different breakpoints and is fixed in width for different screen sizes.

edited Dec 29 '20 at 08:03

Imran Rafiq Rather

7,677
1
16
35

answered Dec 29 '20 at 07:51

ELMAS URGEN

1

score 0 · Answer 2 · edited Dec 29 '20 at 08:18

0

In html code instead of

<div class="col-md-12">

try

<div class="col-12">

I have tried col-12 in my few web projects, it takes all the width of the parent tag(row wise).

edited Dec 29 '20 at 08:18

Dharman

30,962
25
85
135

answered Dec 29 '20 at 08:12

Vicky Gupta

60
1
12

CSS / html-pdf issue: Overflow of page

2 Answers2