Question

我非常希望创建一个网页，当缩放级别较小时，它会显示与Microsoft Word或Acrobat Reader相同的外观，并显示带页面边框的并排页面。

我不知道该怎么做才是定义一个固定大小的paperborder并将内容扔进去（这将是一个可变数量的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>

Answer 1

这在CSS3甚至是Javascript中都不容易。这样做的Google Docs有自己的计算页面引擎。也就是说，CSS3 Regions Module发布了一个非常早期的草案，这将使这更简单。

这里的一般理论是每次更新时测量文本的大小，并重新计算所需的页面，适当地填充内容。可以想象，这不是世界上最容易做到的事情。测量内容和这样的事情有很多不同的方法，如果你真的很专注并且深入研究，我建议你查看这里有关于在javascript中测量文本和元素大小的许多问题。

Answer 2

我们努力实现这种显示的最佳方式是实际显示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显示方法。

祝你好运！

在CSS3中模拟多页文档

2 个答案: