HTML 到 PDF - 以英寸为单位的元素尺寸与预期不符答案

【问题标题】：HTML to PDF - element dimensions in inches not as expectedHTML 到 PDF - 以英寸为单位的元素尺寸与预期不符
【发布时间】：2020-04-20 19:32:11
【问题描述】：

这个问题与 Bootstrap 4 有关。出于某种原因，如果我将页面设置为特定大小，然后在其中添加一个类似大小的元素（div、图像），它会更小。我不知道结果是什么，而这一切都发生在 Vanilla BS4 中。

我降级到 BS3，它按预期工作。

我需要生成 PDF。我使用in 作为组件的度量。我注意到打印项目比我预期的宽度短的异常情况。

我的计算基于this，它声明 96px = 1in。但这不是我看到的。

在 CSS 中，我将页面大小设置为字母（也尝试以英寸为单位手动指定尺寸）。

@page {
  margin: 0.25in 0.5in;
  size: letter;
}

然后我有一个信头图像。验证该图像不超过#10 双窗口信封允许的窗口，因此我需要预测它的长度，我使用pixels/96。然后我注意到我希望与窗口重叠的信头甚至没有接近重叠。进一步挖掘后，我注意到测量结果似乎已关闭。

在下图中，我将页面设置为letter (8.5in x 11in)，图像的宽度设置为10in，并且还没有溢出。我通过将其更改为 3x3 来确保页面大小会影响打印输出，并按预期制作了一个较小的页面。

注意事项：

【问题讨论】：

【解决方案1】：

@Ziyan，您可以在您的 css 中使用@media print，并在打印时以您想要的方式查看页面See Here

【讨论】：

我已经尝试过了...在我的理解中，当您需要区分打印与屏幕时，需要使用@media print。但事实并非如此。我看到的是当我将文档宽度设置为 8.5 英寸并设置图像 10 的样式时，它甚至没有填充页面的宽度。那是我的问题。