4

问题是这样的 - 在 Chrome 中，此页面在一台计算机上正确保存为 PDF，而在另一台计算机上存在问题。我有这个代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
    margin:0; padding:0;
}
.fullscreen
{
    width:1156px;
    height:893px;
    float:left;
    background:url(2.jpg) no-repeat;
}
.firstpage{background:url(1.jpg) no-repeat;}
.lastpage{background:url(3.jpg) no-repeat;}
@media print {
  body {
    width:1156;
    height:893;
  }
}
</style>
</head>

<body>
<div class="fullscreen firstpage"></div>
<div class="fullscreen"></div>
<div class="fullscreen lastpage"></div>
</body>
</html>

它只有 3 个 div 和 3 个不同的背景图像（相同大小 - 1156x893）。在我家的电脑上，一切正常。如果我放置 @page{size:1156 893;} 或 size:auto，或者（在本例中）我根本不放置它，没有区别。

问题是在我的办公室电脑上，无论我做什么，打印模式下的页面大小总是1286x909，内容被缩放并超出页面。我在这里遗漏了什么还是问题根本不在页面代码中？如果它不在代码中，我必须在哪里进行更改才能使其正确？如有必要，我也可以提供 2 个 PDF 文件。

我在两台计算机上都使用 Windows 7 和最新版本的 Chrome。

4

1 回答 1

0

您需要实现完整的 css 样式进行打印。

您为打印而编写的代码仅用于正文。

@media print {
  body {
    width:1156;
    height:893;
  }
}

由于缺少该 css 样式，浏览器将采用 pdf 的默认值。因此，如果您创建一个完整的 css 样式会更好，您可以查看这篇文章以了解如何做到这一点。 https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

请让我知道这是否适合你:)

于 2016-03-23T13:32:29.013 回答