Question

问题是这样的 - 在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。

Answer 1

您需要实现完整的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/

请告诉我这是否适合你：）

在chrome中打印（另存为pdf）问题

1 个答案: