CSS3 multi-column layout converting to PDF using snappy (wkhtmltopdf wrapper)

wkhtmltopdf css
wkhtmltopdf css support
wkhtmltopdf options
wkhtmltopdf page-width

I'm trying to generate 3 column PDF (using barryvdh/laravel-snappy - wkhtmltopdf). Because the text which is going to fill these columns is of unknown length I have to use some mechanism allowing the text fill the columns freely. So I tried to use this CSS:

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

This works great on a web page but I can't convert it to PDF. It doesn't show any errors. It simply converts the page with one column. Any suggestions? Is what I want possible to do with wkhtmltopdf? Or maybe should I use some other library?

This feature isn't available in the Webkit version used in wkhtmltopdf. Looks like we have to use tables, with manual flow.

CSS3 multi-column layout converting to PDF using snappy , CSS3 multi-column layout converting to PDF using snappy (wkhtmltopdf wrapper​). 2016-05-01 16:04 Kornel imported from Stackoverflow. By using our site, Kornel. Linux user and administrator. PHP programmer. 3 CSS3 multi-column layout converting to PDF using snappy

I'm two years late but hopefully this is helpful for someone. After a couple days searching the net and trying to get a multi-column / multi-page pdf going with Wkhtmltopdf this is what I came up with... works great and I haven't seen the solution around. It requires each column having a set width and height. The columns are cloned, it's contents position are offset to show the next span of text. Repeat until the entirety of the content has been displayed.

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';
});

Multi Columns CSS for rendering PDF · Issue #3748 · wkhtmltopdf , This issue is listed in a number of Posts, However, no solution is provided. Using CSS, .newsection { -webkit-column-count: 2; /* Chrome, Safari  After a couple days searching the net and trying to get a multi-column / multi-page pdf going with Wkhtmltopdf this is what I came up with works great and I haven't seen the solution around. It requires each column having a set width and height. The columns are cloned, it's contents position are offset to show the next span of text.

I don't have any problem to generate a PDF with multicolumns with Snappy.

In your class, try to add a width property like this :

.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%;
    }

Document, Description: Converts one or more HTML pages into a PDF document, using Global Options: --collate Collate when printing multiple copies (default) width --​no-pdf-compression Do not use lossless compression on pdf objects -q, --quiet Be size if you have custom scrollbars or css attribute overflow to emulate window  I have been able to a PDF with Grid css layout applied to it using the latest version of the library (in PHP, with the library installed using Composer). Initially I was not able to get it to render on the PDF in the gird (but copying and opening up the intermediate HTML did show it rendering as a grid).

Wkhtmltopdf footer html not working, The CSS layout engine is written in Python, designed for pagination, and If a column name is added to config. wkhtmltopdf is a superb tool that can be used to and we are use barryvdh/laravel-snappy package for generate HTML to PDF but Jan 09, 2017 · Wkhtmltopdf python wrapper to convert html to pdf using the​  otherwise the layout is unpredictable." But what if you don't know what is "large enough" or if it's much more then just one page? If you set height more than as 1 page it will put the 1st column in both the 1st and the 2nd pages and only if it is not enough it will use the 2nd column. This is completely wrong. Here is an example.

Rendering HTML into PDF using WKHTMLTOPDF, Rendering HTML into PDF using WKHTMLTOPDF "Well if you want to find a perfect XHTML+CSS to PDF converter library, forget it. when trying to output a long table that spanned across multiple pages. PDF generator tools like PHP's Snappy, Ruby's wicked pdf and pdfkit. Adding a PHP wrapper. Laravel Snappy PDF. Contribute to barryvdh/laravel-snappy development by creating an account on GitHub.

Top 5 : Best open source PDF generation libraries for PHP, FPDF is a PHP class which allows to generate PDF files with pure Dompdf is (​mostly) a CSS 2.1 compliant HTML layout and rendering engine written in PHP. (via fopen-wrappers); Supports complex tables, including row & column You will have to download wkhtmltopdf 0.12.x in order to use Snappy. wkhtmltopdf and wkhtmltoimage are open source (LGPLv3) command line tools to render HTML into PDF and various image formats using the Qt WebKit rendering engine. These run entirely "headless" and do not require a display or display service.

Comments
  • I was also trying TCPDF which can interpret HTML with method WriteHTML(). But it doesn't work too...
  • What does "can't convert" mean? Is wkhtmltopdf throwing an error, or isn't the text distributed between the columns?
  • "can convert" means that the PDF doesn't have 3 columns but only one like the css was not there. No error is generated.
  • Have you tried giving it a fixed width, to avoid sizing problems with the viewport?
  • No I haven't. But it just looks like the column thing was ignored. All the text is there and everything seems to be OK except the text is in one not 3 columns. The question is whether wkhtmltopdf can do it but I do something wrong or it's just impossible. And maybe there is any other way to do this what I need.