目标
media="print"在我的页面上很糟糕，我想改进它。
基本上，我想在用户打印页面时改善页面的外观。
我在想。 . .
而不是在我的 media="print" 页面上隐藏和显示很多元素.
我决定完全隐藏我的页面，并改为加载 PDF。我做的PDF。我不确定这是否是最好的方法，但我发现这样可以节省很多时间，并且仍然可以完全控制显示/隐藏对象。
HTML
<body >
<span id="web">
<!-- My whole site structure -->
</span>
<span id="print"><iframe src="img/USER.pdf" width="100%" height="830" ></span>
</body>
在我的 <body> 内, 我有一个 PDF
<span id="print"><iframe src="img/name.pdf" width="100%" height="830" ></span>
我通过执行以下操作在整个页面中隐藏该 PDF:
#print{
display: none;
}
然后，当用户要打印我的页面时。我想加载此 PDF，并隐藏我的整个网站。
CSS
/*Hide the whole page*/
#web{
display: none;
}
/*Show PDF back*/
#print{
display:block!important;
}
结果
它可以工作，但不幸的是，它只能在 Safari 中工作。 不是 Chrome，也不是 Firefox。
- 实现这样的目标最有效的方法是什么？
- 有人可以帮我解决这个问题以适用于所有浏览器吗？
- 是否有任何 JS 或 jQuery 插件可以帮助我完成此任务？
如果还有什么我可以提供的，请告诉我。
最佳答案
通常的模式是提供带有文本的链接，例如“可打印版本”。然后，您只需以一种对用户而言并不意外的方式链接到 PDF。
如果您想坚持使用 CSS 打印布局，我在 CSS paged media specification 方面取得了一些成功。 .
这是一个示例 CSS 文件 - 请注意，print 样式中只有少量...
body {
font-family: Georgia, serif;
font-size: 12pt;
}
h2 {
string-set: title content();
}
img {
max-width: 100%;
}
.on-new-page {
display: block;
page-break-before: always;
}
.keep-together {
page-break-before: avoid;
}
.keep-intact {
page-break-inside: avoid;
}
.contents a::after {
content: leader('.') target-counter(attr(href), page);
}
@page {
margin: 2.54cm;
size: portrait;
}
@page :left {
margin-right: 3.18cm;
@bottom-left {
content: counter(page);
}
@top-left {
content: string(title);
}
}
@page :right {
margin-left: 3.18cm;
@bottom-right {
content: counter(page);
}
@top-right {
content: string(title);
}
}
@page :first {
margin-top: 10cm;
}
@media print {
.dont-print {
display: none;
}
}
你可以看看我的example page并进行打印预览以查看其效果。它因浏览器而异，但您可以看到现在对打印布局的控制比过去多得多。
关于javascript - 当用户尝试打印我的页面时，如何加载自定义 PDF？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29928206/