簡體   English   中英

CSS / html-pdf 問題:頁面溢出

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

我有以下非常簡單的 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 被切斷了。 在此處輸入圖像描述

我該如何解決?

您可以嘗試container-fluid而不是container

container-fluid占據了視口的整個寬度並且是靈活的。

另一方面, container相對於不同的斷點采用寬度,並且對於不同的屏幕尺寸其寬度是固定的。

在 html 代碼中,而不是

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

嘗試

<div class="col-12">

我在我的幾個 web 項目中嘗試了 col-12,它占用了父標簽的所有寬度(按行)。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM