简体   繁体   English

CSS / html-pdf 问题:页面溢出

[英]CSS / html-pdf issue: Overflow of page

I have the following very simple HTML.我有以下非常简单的 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.使用html-pdf ,我想从 HTML 中生成一个 A4 PDF 文件。

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.结果,我得到了一个 PDF 文件,但看起来 HTML 被切断了。 在此处输入图像描述

How can I solve it?我该如何解决?

You could try container-fluid instead of container .您可以尝试container-fluid而不是container

container-fluid takes up the full width of the viewport and is flexible. container-fluid占据了视口的整个宽度并且是灵活的。

container on the other hand takes width with respect to the different breakpoints and is fixed in width for different screen sizes.另一方面, container相对于不同的断点采用宽度,并且对于不同的屏幕尺寸其宽度是固定的。

In html code instead of在 html 代码中,而不是

<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).我在我的几个 web 项目中尝试了 col-12,它占用了父标签的所有宽度(按行)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM