logo标签列表

Chrome中打印（另存为PDF）问题

cssgoogle-chromepdfprinting
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>

这只是三个不同背景图片的 div 元素（大小相同-1156x893）。在家里的电脑上，一切正常。如果我放置@page{size: 1156 893;} 或 size:auto，或者（如本例所示）根本不放置，都没有区别。
问题出现在我的办公室电脑上，无论我怎么做，在打印模式下页面的大小总是1286x909，并且内容会被缩放并超出页面范围。我有遗漏了什么吗？或者问题根本不在页面代码中？如果问题不在代码中，我需要在哪里进行更改才能使其正确？如果需要，我可以提供两个 PDF 文件。
我在两台计算机上均使用 Windows 7 和最新版本的 Chrome 浏览器。
1个回答
0
你需要实现一个完整的CSS打印样式。
你编写的打印代码只适用于正文部分。
@media print {
  body {
    width:1156;
    height:893;
  }
}

由于缺少CSS样式，浏览器会采用默认值来生成PDF文件。因此最好创建一个完整的CSS样式表。

您可以参考这篇文章了解如何创建CSS样式表。 https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

如果这对您有帮助，请告诉我 :)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接