我正在开发一个网站,需要处理打印视图.通常,当我遇到布局问题时,我会使用Chrome的Element Inspector.但是,这在打印预览模式下不存在.
是否有Chrome插件或其他方式来更改Chrome本身的查看媒体,以打印机的形式查看页面？我认为它没有特定于Chrome的解决方案,但这是我的主要浏览器,所以拥有一个浏览器内的解决方案会很不错.
现在我只专注于打印预览媒体,但是能够更改为任何支持的媒体类型(即所有/盲文/浮雕/手持/打印/投影/屏幕/语音/ tty /)是理想的电视).
google-chrome print-preview web-inspector google-chrome-devtools
我最近一直在为一个网站制作一个打印样式表,我意识到我无法通过有效的方式进行调整.使用重新加载周期来处理屏幕布局是一回事:
但是当你尝试打印时,整个过程会变得更加艰难:
我在这里错过了哪些工具？WebKit的检查员是否"假装这是分页媒体"复选框？Firebug(不寒而栗)可以做些什么吗？
我正在使用CSS属性,
如果我使用page-break-after: always;=>它之前打印一个额外的空白页
如果我使用page-break-before: always;=>它之后打印一个额外的空白页.怎么避免这个？
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
page-break-after: always;
}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>
我需要查看浏览器在打印预览中的确切位置,以便我可以使用CSS属性修改该行为.换句话说,我需要设置分页本身的样式(当然是为了测试目的),所以我可以看到分页的位置,以便我知道哪些选择器可以使用page-break-after/inside/before属性进行修改.
为了澄清这一点,我不是在寻找Chrome Dev Tools打印模拟.遗憾的是,该工具无法显示打印页面的样子(任何人都可以将其结果与Chrome浏览器或任何其他浏览器中的CTRL P加入的打印预览窗口中的结果进行比较).但是,当您需要确定某些打印CSS规则是否覆盖某些屏幕媒体规则时,该工具可能很有用.但是在这种情况下,当您需要找到浏览器呈现的分页符的确切位置以便手动修改分页符行为时,它没有多大帮助.
如何在新的Firefox Quantum dev控制台中模拟媒体类型"print"？
尝试以某种方式启用它并搜索文档但找不到任何提示!
正如您在此处看到的,开发人员工具栏已从最新版本的Firefox中删除,因此我无法再运行"media emulate print"命令.我宁愿不必使用Chrome来调试我的打印样式,那么还有其他方法可以在Firefox中启用该功能吗？
编辑:Web Developer扩展不是一个选项,因为它只适用于<link>具有media="print"属性的标记- 而不是普通CSS文件中包含的打印媒体查询.
在任何人将此标记为重复之前: 我已经看到了这个问题(这不适用于当前的Developer Edition)和这个问题(它告诉我如何在Chrome中执行此操作).除了发布一个新问题之外,我没有足够的代表去做任何其他事情.
css print-style media-queries firefox-developer-edition firefox-nightly
用puppeteer打印html转pdf时，遇到一个奇怪的问题。我发现 puppeteer 总是忽略@media 打印中的一些 CSS 规则。
这是我的环境：
Puppeteer 版本：1.11
平台/操作系统版本：Win10/CentOS7
Node.js 版本：10.15.0
CSS代码：
@media print {
.flipbook-viewport .flipbook{
width: 794px!important;
height: 1123px!important;
max-height: 1123px;
max-width: 794px;
background-color: red;
}
.right-01 .image {
width: 92%;
background-repeat: no-repeat;
background-size: 100%;
background-image: url('../image/content/test.png');
height: 920px;
/* width: 740px; */
margin-top: 0.8rem;
}
}
你可以注意到我设置了一个背景颜色来检查测试结果。在我的测试中，当我使用 page.emulateMedia('print') 执行 puppeteer 时，翻书视口和翻书的规则工作正常。但是 right-01 和 image 不起作用。
但有趣的是，当我以相同的规则使用 @media 屏幕（也将 page.emulateMedia 更改为屏幕）时，它们都运行良好。所以我认为它可能与 puppeteer 有一些问题。
预期的结果是什么？ 好.pdf
会发生什么？ 错了.pdf
有没有人遇到过这个问题？如何解决这个问题？请帮忙。
我的 puppeteer 代码示例：
const puppeteer = require('puppeteer-core');
(async () …