CSS和HTML打印书籍

Question

好的，假设我想使用HTML和CSS编写一本书。我该如何定义页面的页眉和页脚（并在页脚中显示页码）？如何使浏览器显示页面断点和边距（类似于预览模式）？请注意，我不是要求您为我编写代码，而是需要指导资源，以完成此类任务。我完全不知道如何开始。为了解释我想在浏览器中显示的内容，我希望能够看到每个页面的缩略图，就像PDF查看器中一样，基本上文本溢出会创建一个分页符。

我已经研究了@media print，但是它没有任何用于创建页眉和页脚的钩子。

我无法让这个工作（来自w3.org）：

title { position: running(header) }
@page { @top-center {
  content: element(header) }
}

我查看了Boom!的代码，它很适合打印，但在浏览器中显示不同。

那么...有人知道我应该在哪里寻找一个好的起点吗？

- CJT3

Answer 1

这是我的解决方案：

<div id='document'>
    <div class='page'>
        <div class='header'></div>
        <div class='footer'></div>
        <div class='content'></div>
    </div>
</div>

一切都在

中完成。对于每个.page，.header，.footer和.content都具有正确的页面高度和宽度。

之后，我使用JavaScript剪切了超出div.content范围的所有内容。然后克隆了div.page，在新页面的页眉

中更新了页数，并填充了新页面的content

。

重复此过程，直到我有了大约100页，并且最后一页的content

中没有任何东西突出。

- Niclas Larsson

Answer 2

我假设您正在使用纯HTML，没有任何代码后台。

因为如果有任何代码后台，那就是另一回事了。

定义一个主div，其中包含class="page"。在其中定义3个div，分别用于头部、内容和页脚。

.page {
   display: block;
   height: 800px; 
   width: 100%;
   /*Give margin as per your requirement.*/
}

.header {
   display: block;
   height: 50px;
}


.content {
   display: block:
   height: 700px;
}

.footer {
   display: block;
   height: 50px;
}

根据您的需求添加其他样式。

创建另一个媒体类型为“打印”的样式表。

在那里为页面添加以下样式。

.page {
   display: block;
   height: 800px; 
   width: 100%;
   /*Give margin as per your requirement.*/
    /* this will print the page in new paper*/
   page-break-after: always;
}

而一个页面的HTML将会是这样的

<div class="page">
  <div class="header">HEADER CONTENT</div>
  <div class="content"> MAIN PAGE'S CONTENT</div>
  <div class="footer"></div>
</div>

根据您需要的页面数量重复上述代码。

您还可以使用表格布局来实现此目的。

如果使用代码后端，则内容可以动态生成。

希望这有所帮助。

- Narendra

---

我不想重复任何代码来定义新页面，特别是因为我不一定会在同一种纸张上打印书籍。 - CJT3

我唯一想使用分页符的时候是在新的章节开始，因为章节应该总是从新页面开始。 - CJT3

请告诉我您是否想要使用任何代码后端？ 至少您必须使用JavaScript。 否则，仅使用HTML和CSS，您只能分页而无法分别设置页眉和页脚。 - Narendra

我不确定你所说的“code-behind”是什么意思，但我打算至少使用JavaScript。 - CJT3

Answer 3

嗯，这可以通过纯HTML和CSS完成，但绝对不是最好的方法，因为每次想要开始新页面时，重复几乎相同的代码块会变得非常令人沮丧。对于类似PDF的左侧面板，您可以使用Iframes，更多信息在这里

基本上，您需要为书中的每一页制作一个.htm页面，并通过链接严格地将它们连接在一起。当您完成后，您可以截取您制作的每一页的屏幕截图，保存缩略图，并制作另一个HTML页面，该页面将成为面板，并最终包含在书中的所有其他页面中（如我链接中的教程所示）。

更新

关于分页符，您可以创建具有相同类别并被设计为页面的div，如此处所示。

- menislici

---

问题在于我不想使用太多的HTML，我只希望如果文本超过当前页面，则文本可以溢出到下一页。如果我想要打印不同大小的页面会发生什么？ - CJT3

我不确定你想通过页面分页展示什么......除非我开始新的章节，否则我不想定义/编写页面分页。 - CJT3

这也是我可能会定义一个新标题与新章节标题相对应的时候。 - CJT3