用於在 wkhtmltopdf 中呈現 PDF 的多列 CSS

Question

我正在嘗試使用 wkhtmltopdf libraray ( https://github.com/wkhtmltopdf/wkhtmltopdf ) 從 html 創建 PDF

但是我在創建像 newparers 這樣的兩列 pdf 時遇到問題。

很多帖子都列出了這個問題，但是沒有提供解決方案。

使用 CSS，

.newsection { -webkit-column-count: 2; /* Chrome, Safari, Opera /
-moz-column-count: 2; / Firefox */
column-count: 2;}

不呈現帶有報紙樣式列的 PDF。

所需的輸出如下所示；

Answer 1

試試這個兄弟.. :)

https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1872#issuecomment-50742814

 /* docs: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1872#issuecomment-50742814 */ .container-two-row { /* You *must* define a fixed height which is large enough to fit the whole content, otherwise the layout is unpredictable. */ height: 28em; /* Width and count aren't respected, but you have to give at least some dummy value (??). */ -webkit-columns: 0 0; /* This is the strange way to define the number of columns: 50% = 2 columns, 33% = 3 columns 25% = 4 columns */ width: 50%; /* Gap and rule do work. */ -webkit-column-gap: 1px; -webkit-column-rule: 1px solid black; text-align: left; } .height-35em { height: 35em; } .mt-15 { margin-top: 15px; }

 <div class="container-two-row height-35em mt-15"> <strong>An Article</strong> <div> 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div> 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div> 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div> 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>