Question

我正在尝试生成3列PDF（使用barryvdh / laravel-snappy - wkhtmltopdf）。因为要填充这些列的文本长度未知，所以我必须使用一些机制，允许文本自由填充列。所以我尝试使用这个CSS：

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

这在网页上效果很好，但我无法将其转换为PDF。它没有显示任何错误。它只是将页面转换为一列。有什么建议？我想要用wkhtmltopdf做什么？或者我应该使用其他一些库吗？

Answer 1

wkhtmltopdf中使用的Webkit版本不提供此功能。看起来我们必须使用表格，手动流程。

Answer 2

我迟到了两年，但希望这对某人有帮助。经过两天的搜寻，并尝试使用Wkhtmltopdf来获得多列/多页的pdf，这就是我想出的...效果很好，但我还没有看到解决方案。它要求每列具有设定的宽度和高度。列被克隆，其内容位置偏移以显示下一个文本范围。重复直到显示全部内容。

https://jsfiddle.net/pa2k6wj5/1/

HTML

<section class="parent">
    <div class="column">
        <div class="content">
            (longform text goes here...)
        </div>
    </div>
</section>

CSS

.column {
    position: relative;
    width: 3in;
    height: 5in;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}
.content {
    width: 3in;
}

JS

// get elements
var parent = document.querySelector('.parent');
var column = document.querySelector('.column');
var content = document.querySelector('.content');

// calculate height values of column and it's content
var columnHeight = column.offsetHeight;
var contentHeight = content.offsetHeight;

// create an array of offset values
var offsetValues = [];
for (var i = columnHeight; i < contentHeight; i+= columnHeight) {
    offsetValues.push(i);
}

// create a new column for each offset value
offsetValues.forEach( function(offsetValue, i) {

    // init clone and add classes
    var cloneColumn = document.createElement('div');
    var cloneContent = document.createElement('div');
    cloneColumn.classList.add('column');
    cloneContent.classList.add('content');

    // populate the DOM
    cloneContent.innerHTML = content.innerHTML;
    cloneColumn.appendChild(cloneContent);
    parent.appendChild(cloneColumn); 

    // apply position and offset styles
    cloneContent.style.position = 'relative';
    cloneContent.style.top = '-' + offsetValue + 'px';
});

Answer 3

使用Snappy生成包含多列的PDF没问题。

在您的课程中，尝试添加一个width属性，如下所示：

.threecol {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
        /* This is the strange way to define the number of columns:
        50% = 2 columns, 33% = 3 columns 25% = 4 columns */
        width: 33%;
    }

CSS3多列布局使用snappy转换为PDF（wkhtmltopdf包装器）

3 个答案: