在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模擬多頁文檔

回答

相關問題