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.

Solution 1

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

 -webkit-transform: rotate(90deg);

Solution 2

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

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

Solution 3

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