logo标签列表

在CSS3中模拟多页文档

htmllayoutcssmultipage
7

我非常想创建一个网页，当缩放级别很小且以分页显示页面边框时，它的外观与 Microsoft Word 或 Acrobat Reader 相同。

我不知道该如何定义一个固定大小的纸张边框并将内容放入其中（这将是可变数量的 HTML 块元素），并使这些元素从一页流动到另一页，创建所需数量的页面，并适当地分页。这旨在模拟印刷输出，用于快速设计研究原型。

我脑海中有一些想法，认为可能需要 JavaScript，但由于我的 JavaScript 知识接近于零，而且我也很愿意学习 CSS3 布局技巧，因此更倾向于使用纯 CSS（尽管 JS 解决方案是一个不错的替代选择）。

当前的单页文档如下：

<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />
        <title>Relatório Html</title>
        <style type="text/css">
            html, body {
                margin:0;
                padding:0;
            }

            body {
                background-color: #aaa;
            }

            .paperpage {
                position: absolute;
                width: 600px;
                padding: 50px 30px 40px 30px;
                margin-left: -320px;
                left: 50%;
                top:10px;
                bottom:10px;
                background-color: white;
                box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            }

            #innerpage {
                position: relative;
                margin: 0 auto;
                height: auto !important;
                min-height: 100%;
            }
        </style>
    </head>

    <body>
    <div class="paperpage">
        <div id="innerpage">
            <p>Some Content</p>
        </div>
    </div>
    </body>
</html>
2个回答
4
这在CSS3或甚至Javascript中都不容易实现。Google Docs有自己的引擎来计算页面。话虽如此，CSS3区域模块有一个非常早期的草案发布，这将使它更加简单。
一般的理论是每次更新文本时测量其大小，并重新计算所需的页面，适当填充内容。正如你所想象的那样，这并不是世界上最容易做到的事情。有许多不同的方法来测量内容和类似的东西，如果你真的很专注并深入研究，我建议查看与Javascript中测量文本和元素大小相关的许多问题。
1

我们找到的最佳显示方式是将显示内容保存为PDF格式，并使用PDFObject进行显示，或者更好的方法是直接在<object>元素中显示。由于浏览器会直接使用Adobe或内置的显示方法，所以它与您想要的完全相同，而无需设计所有内容。

例如：

<object
  data="/clients/<%= client.id %>/reports/print?preview=true" 
  type="application/pdf" width="100%" height="98%">
  <p>Your browser does not support embedded PDFs.</p>
</object>

我们使用wkhtmltopdf来进行所有的HTML到PDF转换。它相对简单易用，我们已经在各种CSS技术下使用它来处理极其复杂的HTML文档，并取得了巨大成功。

根据我的经验，只要您不需要在该视图中实际编辑文档，以这种方式显示文档将比编写特定的CSS显示方法更节省时间。

祝你好运！

1
更新的链接：https://wkhtmltopdf.org/（想要编辑链接，但收到了“太多待处理的编辑”错误信息。） - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接