Google Chrome (第51节)不应用印刷媒体css
我知道关于这件事有很多问题，但我什么都试过了，似乎什么都不起作用。我跟踪了这些链接：
Splitting HTML page so Printer splits it into separate pages
Chrome: Print preview differs from simulate CSS media print
Print media queries being ignored in Chrome?
Google Chrome Printing Page Breaks
还有更多。
我尝试了他们所有的每一个建议。
到目前为止，我得到的是：
html
<link href="path/styles/print.css" rel="stylesheet" media="print">
<div class="page-break">
//some stuff
</div>css
@media all {
.page-break { display: none; }
}
@media print {
.page-break { display: block; page-break-before: always;}
}在IE和FF中，我无法看到我将要打印的页面的预览，但是当我打印的时候，它工作得很好。用铬，我可以看到预览，但它永远不对.接下来，我试图将它保存为pdf，但它仍然不应用打印css。
*将pdf储存为pdf与努力使其有效无关.只是为了节省纸张
现在，在你发帖之前，请注意以下几点：
我试过这个：
- ！重要；黑客
- 删除css页面并将css直接放在html页面中
- 删除所有媒体
- 删除所有媒体，并将显示块更改为无
- 尝试分页-内部:避免；
- *{过渡:无！重要；}
- .破页{.过渡:无！重要；}
- 把它放在主样式表中
- 浮标:没有！重要；
- 位置:相对；位置:静态；
- 显示:块；显示:内联；
- 箱体尺寸:内容盒；
- -webkit-区域-突破-内部:避免；
我没有尝试使用其他版本的Chrome。我尝试了v.50，在多次尝试失败后，我更新到了v.51。有人说它适用于第38节之类的.我不会降级到那个版本的。
编辑:我忘了提到我的html代码在jsp页面中。所以<div class="page-break">在一个for-loop中。每个循环都必须在单独的页面上。
编辑2:我创造了一个小提琴。我粘贴了我的源代码，它运行得很好。因此，我删除了css样式表，这是我的页面中的链接。但即使这样做也行不通。所以如果它在某个地方被覆盖了，它就不在那里。
这个页面是一个JSP页面，它有什么可做的吗？如果不是，我就一无所知，因为在相同的项目中，在我想要打印的页面上，我添加了一个重定向到page.html的按钮，并创建了具有相同类名的3个div，它工作得很好。
回答 2
Stack Overflow用户
发布于 2016-06-21 19:16:13
所以!我是来回答我自己的问题的，以防有人不能让它像我一样工作。
我试图给出一个新的方法来解决我的问题，因为我不能每页打印一个div，我不知道为什么，我必须找到另一种方法。但不是说我不知道它是怎么工作的..。我创建了一个JSFiddle，它成功了。在我自己的项目中，我创建了一个html页面，它成功了。但既然我是在JSP里，也许它在某个地方搅乱了我的代码。我没有头绪。
这就是我所做的。
function getStuffToPrint(data){
var html = "", index, len;
for (index = 0, len = data.length; index < len; ++index) {
html += "<div class=\"custom-page-break\">" + data[index].innerHTML + "</div>";
}
var mywindow = window.open();
mywindow.document.write('<html><head>');
mywindow.document.write('<link href="my/path/to/styles/print.css" rel="stylesheet" type="text/css"/>');
mywindow.document.write('</head><body >');
mywindow.document.write(html);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
}在我的例子中，data是一个objectHTMLCollection：document.getElementsByClassName("custom-page-break")
有点急转弯，我不得不再次用类名写div .
这是我的css，如果没有display: block和page-break-inside，它可能会工作，我甚至没有尝试。
@media print {
.custom-page-break {
display: block !important;
page-break-before: always !important;
page-break-inside: avoid !important;
}
}希望它能为一些人节省时间。
Stack Overflow用户
发布于 2016-06-21 14:03:00
您是否尝试过将print.css放在您的主样式css文档中？我有一个类似的案子，它解决了我的问题。
您不必每次都要制作一个pdf文件来查看@media打印是否有效，您可以在Chrome上的Google开发工具中看到类似打印的页面：
要查看该选项，请执行: F12 ->显示控制台->呈现(它是控制台的一个选项卡) ->检查“模拟媒体打印”。
https://stackoverflow.com/questions/37945748
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号