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

编程问答 2022-06-01

问题描述

我有以下非常简单的 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>

使用 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);
});

结果我得到了一个 PDF 文件，但看起来 HTML 被切断了。

enter image description here

我该如何解决？

解决方法

您可以尝试使用 container-fluid 而不是 container。

container-fluid 占据视口的整个宽度并且是灵活的。

container 另一方面，针对不同的断点采用宽度，并且针对不同的屏幕尺寸采用固定的宽度。

,

在 html 代码中代替

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

试试

<div class="col-12">

我在我的几个网络项目中尝试过 col-12，它占用父标签的所有宽度（按行）。

htmlhtml-pdfpdfpdfpdf