transform - rotate and scale is not working when i convert html content to pdf

Question

I am using html2pdf to convert HTML content with images to PDF and I have also added an option to rotate and flip the images... Right now pdf is created successfully ... but if I have rotated or flipped any image by using CSS transform: rotate(90deg);

transform:scaleX(-1);

then in a PDF file, that image is not looking rotated or flipped... Any idea to get rid of this issue... Please share ...or any solution for that.

Thanks in Advance.

Ruinous

Perhaps html2pdf doesn't support the transform property. – Odoriferous

Yes, i think u are right.. i just saw compatibility list from here tufat.com/docs/html2ps/compatibility.css.2.1.html there is no details for transform... Is there any way to do that.. – Ruinous

Answer 1

use "-webkit-transform" instead of "transform". for example:

 -webkit-transform: rotate(90deg);

Immoderation

Try using -webkit-transform: rotate(90deg); along with -webkit-backface-visibility: hidden; – Pacemaker

Answer 2

try wkhtmltopdf, it works for css transforms also (but only with -webkit prefix)

https://code.google.com/p/wkhtmltopdf/

Olympia

hi... i get a function _prepareTransform in html2pdf.class.php .... but i have not ..how to use it?? or is wkhtmltopdf is able to convert html content with tranform : scale,rotate with lots of images... i have googled many times but unfortunately i didn't get any thing... which can be helpfull for me... thanks in advance... – Ruinous

i haven't used html2pdf so i don't have any idea about that.. wkhtmltopdf will convert html with any transform but i think you want to use it inside your code white wkhtmltopdf is a command line tool – Olympia

thanks Yogesh for your info.. i will try to implement that... could u please tell me .. why did you say that wkhtmltopdf works only with -webkit prefix. Is there any link or any example with some explanation : how to use it? can i implement it in localhost. Thanks.. – Ruinous

because it uses webkit to render html. I think in the link given in answer, you can find everything you want. There is a wiki also where some examples are given even for integrating it with php. I used wkhtmltopdf using system/exec call in php to convert html to pdf. – Olympia

@YogeshKhatri: for rails there is also a nice GEM, that wraps arround whhtml2pdf (wickedpdf). so you can use it like any format in rails. i.e. no command line. I just wanted to mention. – Narghile

Answer 3

try style="-webkit-transform: rotate(-90deg);" instead of transform.

It work for me in both html-pdf and html2pdf converter.

Tenno

Answer 4

I relaunch this old post. For whom is still searching an alternative to wkhtmlToPdf or wkhtmlToImage that working with the lastest features of CSS3 and HTML5, here I found two tools thanks to this github issues :

https://github.com/wkhtmltopdf/wkhtmltopdf/issues/4092

So there is two awesome tools that simply use the Chromium browser directly, the one I use is Pupputer that allow you to use it though Node.js code (so it's a good thing for Node.js web server 😮 !), taking a screenshot of the webpage and convert it to pdf or image.

Also it allow you to choose your chromium based browser 🥳!!! (Use puppeteer-core instead of puppeteer for the light version and using an external chromium)

I try it and it just render a screenshot that is the same as you can see it on your chromium browser, I use the rotateX, rotateY, rotateZ with perspective of CSS properties and working very well.

Enjoy !!!

Puppeteer : https://github.com/puppeteer/puppeteer

ChromeHtmlToPdf : https://github.com/Sicos1977/ChromeHtmlToPdf

Below a simple code to try it in your local side with Node.js :

// I use here the light version so I can choose my default chromium browser that I used on my Windows
    // to install it :
    // npm -i puppeteer-core
    const puppeteer = require('puppeteer-core');
    (async ()=>{
        // path to my default browser, idk if it's work with opera or other chromium based browser
        const browser = await puppeteer.launch({ executablePath: 'E:/Programmes/chrome-win/chrome.exe' });
        const page = await browser.newPage();
        
        // the default size if 800 * 600
        await page.setViewport({
            width: 800,
            height: 533,
            deviceScaleFactor: 1,
        });
        
        // the page targeted that I want the screenshot
        await page.goto('http://localhost/Fiverr/3dAxis/temp/2_photo2.jpg.html');
        
        // the output
        await page.screenshot({ path: 'example.png' });
        await browser.close();
    })();

Toothed