在每個頁面上插入摺疊標記（wkhtmltopdf）

我使用wkhtmltopdf 0.12.2.1創建發票等。在每個頁面上插入摺疊標記（wkhtmltopdf）

我需要在PDF中的每個頁面上顯示摺疊標記。如果內容大於一個，我怎樣才能在每一頁上用javascript重複它們？

這是我的基本標記

<!DOCTYPE html> 
<html> 
    <head> 
    <title>PDF Title</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    </head> 
    <body id="pdf-page"> 
    <div class="marks"> 
     <div class="mark mark-top mark-left"></div> 
     <div class="mark mark-top mark-right"></div> 
     <div class="mark mark-middle mark-left"></div> 
     <div class="mark mark-bottom mark-left"></div> 
     <div class="mark mark-bottom mark-right"></div> 
    </div> 
    <div id="print-area"> 
     <div id="letter-head"></div> 
     <div id="subject-line">Subject</div> 
     <div id="document-content"> 
     .... 
     .... 
     .... 
     </div> 
    </div> 
    </body> 
</html>

看起來基本上像Image

來源

2016-02-08 csy_dot_io

而不是down-和closevote，告訴我爲什麼這樣我就可以改善我的問題。 –

當人們這樣做時，我討厭它。 – ketchupisred

我不知道你爲什麼會陷入低谷，但是你能證明JavaScript在哪裏發揮作用嗎？我不熟悉'wkhtmltopdf'。 – Pogrindis

好吧，這花了我天搞清楚了這一點....因爲在互聯網上缺乏實例（用於PHP/HTML/JavaScript）的。我們得到了以下步驟：

得到DPI文檔的
集元素真實頁大小（淡出人們的視線）
創建包裝/頁面元素（你的情況.marks）
確定頁面的內容是否需要多個頁面以適應

注意：我在做這個測試時沒有測試等，當然你需要玩。

... 

<div class="marks"> 
    <div class="mark mark-top mark-left"></div> 
    <div class="mark mark-top mark-right"></div> 
    <div class="mark mark-middle mark-left"></div> 
    <div class="mark mark-bottom mark-left"></div> 
    <div class="mark mark-bottom mark-right"></div> 
</div> 

... 

<script> 
    // some static stuff found it somewhere on the internet 
    var PDF = { 
     width: 8.27, // inches, 210mm 
     height: 11.65, // inches, 296mm 
     margins: { 
      top: 1.97, left: 0.34, 
      right: 0.393700787, bottom: 0.393700787 
     } 
    }; 

    $(document).ready(function() { 
     // get page sizes by creating 'shadow' element 
     var pageSize = $('<div></div>') 
      .css({ 
       height: PDF.height +'in', width: PDF.width +'in', 
       top: '-100%', left: '-100%', 
       position: 'absolute', 
      }) 
      .appendTo('body'); 

     // set debug element 
     $('.debug').html(pageSize.height()); 

     // set every page elements .marks to proper height 
     // dont forget the substract the header and footer height 
     $('.marks').height(pageSize.height() - footerHeight - headerHeight); 

     // @TODO: duplicate .marks to times a pages is created, and !!maybe!! set the top of .marks with pageSize.height() 
    }); 
</script>

我發現我的靈感代碼here。

這對我來說很成功，因爲我有固定高度的元素，需要在頁面上重複它（在我的.wrapper elm與.marks相同，它們是'相對'元素）。通過這種方式，我可以通過在您的案例中關閉.marks來確定何時「打開」新頁面。

來源

2016-02-17 20:02:12

您是如何知道新頁面何時開始的？我不明白這一點。我的標記也是絕對定位的，只在第一頁上。 –

由於動態元素的高度爲150px，在開發過程中，我需要關閉我的'.wrapper'元素並開始一個新的'.wrapper'，然後檢查我可以在頁面上放置多少元素。然後我繼續將數據放入頁面。例如：頁面的高度爲550px，每個動態元素的高度爲150px。 550/150 = 3,6倍舍入到3，我知道很多元素我放在一個單一頁面/ .wrapper元素。所以在3個元素之後，我結束了.wrapper並開始了一個新的。包裝元素（'$ index％3 === 0？close + open：nothing'）。 –

由於'.wrapper'元素的高度爲：'page_height - footer_height - header_height'，它在技術上完全適合生成的每個頁面上的頁眉和頁面。儘管不要忘記在'.wrapper'元素上設置一個'page-break-after'。在包裝元素中，將標記放置爲「絕對」元素，並將它們放在如下位置：35％ - 50％ - 65％ –

在每個頁面上插入摺疊標記（wkhtmltopdf）

回答

相關問題