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>
4

2 回答 2

3

这在 CSS3 甚至 Javascript 中都不容易做到。执行此操作的 Google Docs 拥有自己的页面计算引擎。也就是说，有一个非常早期的CSS3 区域模块草案发布，这将使这变得更简单。

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

于 2012-02-16T04:00:34.497 回答
0

我们已经制定出具有这种显示的最佳方法是实际以 PDF 格式显示并使用 PDFObject 显示它，或者更好的是，直接在<object>元素中显示。由于浏览器将直接使用 Adob​​e 或内置显示方法，因此它将与您正在寻找的内容相同，而无需花费所有精力进行设计。

例如：

<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 显示方法相比，以这种方式显示它会为您节省更多时间，只要您不需要在该视图中实际编辑文档。

祝你好运！

于 2013-06-07T21:06:10.253 回答