在CSS3模拟多页文档

我很想建立一个网页，将有，比方说，Microsoft Word或Acrobat Reader软件相同appearence当缩放级别小，它显示并排侧页与页边界。在CSS3模拟多页文档

我不知道该做什么是定义一个固定大小的纸面并将其中的内容（这将是一个可变数量的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>

来源

2012-02-16 heltonbiker

这是不容易做到的CSS3甚至在Javascript。这样做的Google文档有自己的计算页面的引擎。这就是说，有贴CSS3 Regions Module这将使这个有很多简单的极早期草案。

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

来源

2012-02-16 04:00:34 Ktash

我们制定这种显示方式的最佳方式是实际上以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显示方法。

祝你好运！

来源

2013-06-07 21:06:10 slickplaid

在CSS3模拟多页文档

回答

相关问题