使用 html-pdf-chrome 打印到 A4 PDF 时低于 A4 div 的间隙很大答案

【问题标题】：Big gap below A4 div when printing to A4 PDF with html-pdf-chrome使用 html-pdf-chrome 打印到 A4 PDF 时低于 A4 div 的间隙很大
【发布时间】：2020-10-26 06:46:08
【问题描述】：

我目前在我的 Laravel 项目中使用 westy92 / html-pdf-chrome 库将 HTML 打印为 PDF。我的前端基于 React。

我创建了一组 div 来充当 A4 页面：

<div id="pdf" className="printable-pdf">
    <div className="editor">
        <div className="editor__page"
            style={{
                padding: '20mm',
                background: '#eb4034',
            }}>
            <p>First page</p>
        </div>
        <div className="editor__page"
            style={{
                padding: '20mm',
                background: '#1e7985'
            }}>
        <p>Second page</p>
        </div>
    </div>
</div>

还有 CSS：

* {
  -webkit-print-color-adjust: exact;
}

.printable-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.editor {
  height: 100%;
  width: 100%;

  &__page {
    background: white;
    width: 8.3in;
    height: 11.7in;
    display: block;
    margin: 0 auto;
    box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
    border: 1.25cm solid #000;
  }
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  body,
  .editor__page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

它在打印时使用 emogrify 设置我的 css inline 样式，输出示例如下：

<!DOCTYPE html>
<html style="-webkit-print-color-adjust: exact;">
<head style="-webkit-print-color-adjust: exact;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" style="-webkit-print-color-adjust: exact;">
<style type="text/css">@media print {body,.editor__page{margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;}}</style>
</head>
<body style="-webkit-print-color-adjust: exact;"><div class="editor" style="-webkit-print-color-adjust: exact; height: 100%; width: 100%;">
<div class="editor__page" style="-webkit-print-color-adjust: exact; width: 8.3in; height: 11.7in; display: block; margin: 0 auto; box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5); border: 1.25cm solid #000; padding: 20mm; background: rgb(235, 64, 52);"><p style="-webkit-print-color-adjust: exact;">First page</p></div>
<div class="editor__page" style="-webkit-print-color-adjust: exact; width: 8.3in; height: 11.7in; display: block; margin: 0 auto; box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5); border: 1.25cm solid #000; padding: 20mm; background: rgb(30, 121, 133);"><p style="-webkit-print-color-adjust: exact;">Second page</p></div>
</div></body>
</html>

为了可视化我的期望，这是我的 HTML div 与打印的内容： https://imgur.com/a/uVQmVrh

如您所见，我在页面底部出现了一些空白。我已经通过Adobe检查了大小，div和PDF输出都是A4格式。

最后，这些是我的 html-pdf-chrome 设置，用 docker 设置：

const htmlPdf = require('html-pdf-chrome');
const http = require("http");

http.createServer(function (request, response) {
    let html = '';
    request.on('data', function (chunk) {
        return html += chunk;
    });
    request.on('end', async function () {
        response.writeHead(200, {
            'Content-Type': 'application/pdf'
        });

        let pdf = await htmlPdf.create(html, {
            port: 9222,
            printOptions: {
                printBackground: true,
                paperWidth: 8.3,
                paperHeight: 11.7,
                marginTop: 0,
                marginBottom: 0,
                marginRight: 0,
                marginLeft: 0,
                scale: 1,
                footerTemplate: '',
                displayHeaderFooter: false,
            }
        });
        let buffer = pdf.toBuffer();

        response.end(buffer);
    });

}).listen(8765);

为了阐明我的目标，我正在尝试制作在 html 和 PDF 之间以 1:1 打印的页面，但在打印时我的页面底部存在空白问题。如何使我的 div 适合？

【问题讨论】：

标签： php html css reactjs pdf

【解决方案1】：

所以我发现这是由 box-sizing 引起的，并通过添加来修复它：

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box !important;
}

也许有人可以进一步解释为什么这是原因，因为我只是通过反复试验得到了这个结果。

【讨论】：