调整HTML结构

Question

目标

我页面上的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 插件可以帮助我完成此任务？

如果我还能提供其他任何内容，请与我联系。

enter image description here

Answer 1

通常的模式是提供带有“可打印版本”等文本的链接。然后，您可以以非令人惊讶的方式为用户链接到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并进行打印预览，以查看其效果。它因浏览器而异，但您可以看到现在有比以往更多的控件。

Answer 2

对于那些喜欢我的方法并为此寻找解决方案的人，以下是我的想法。我将PDF转换为图像（.PNG）。

调整HTML结构

将它们包裹在div或span。

周围

<span id="web">
<!-- Whole HTML structure -->
</span>


<span id="print" style="display: none;" >
    <img src="img/Image.png" width="90%">
</span>

链接到打印样式表。

将其添加到页面顶部。

<link rel="stylesheet" media="print" href="css/print.css" />

小结

我将我的图像隐藏起来。

`<span id="print" style="display: none;" ><img src="img/Image.png" width="90%"></span>`

然后，当用户处于打印模式时，我会将其显示回来，另一个单词media =print，然后我的print.css将会启动。

<强> print.css

/*Hide the whole page*/
#web{
    display: none;
}


/*Show Image back*/
#print{
    display:block!important;
    background-color: white;

}

结果

当用户尝试打印时，现在他们应该看到这样的内容：

enter image description here

这应该适用于任何浏览器，因为它只是一个图像。

当用户尝试打印我的页面时，如何加载自定义PDF？

2 个答案:

调整HTML结构

链接到打印样式表。

小结

结果