轉換 - 當我將 html 內容轉換為 pdf 時，旋轉和縮放不起作用

Question

我正在使用 html2pdf 將帶有圖像的 HTML 內容轉換為 PDF，我還添加了一個旋轉和翻轉圖像的選項......現在 pdf 已成功創建......但是如果我使用 CSS transform: rotate(90deg);旋轉或翻轉了任何圖像transform: rotate(90deg);

transform:scaleX(-1);

然后在 PDF 文件中，該圖像看起來沒有旋轉或翻轉......任何想法擺脫這個問題......請分享......或任何解決方案。

提前致謝。

Answer 1

使用“-webkit-transform”而不是“transform”。 例如：

 -webkit-transform: rotate(90deg);

Answer 2

嘗試 wkhtmltopdf，它也適用於 css 轉換（但僅適用於 -webkit 前綴）

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

Answer 3

我重新發布這個舊帖子。 對於那些仍在尋找 wkhtmlToPdf 或 wkhtmlToImage 的替代品的人來說，它可以使用 CSS3 和 HTML5 的最新功能，由於這個 github 問題，我在這里找到了兩個工具：

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

所以有兩個很棒的工具可以直接使用 Chromium 瀏覽器，我使用的一個是Pupputer ，它允許你通過 Node.js 代碼使用它（所以這對 Node.js 網絡服務器來說是一件好事😮！），截圖並將其轉換為 pdf 或圖像。

它還允許您選擇基於鉻的瀏覽器🥳！！！ （使用 puppeteer-core 而不是 puppeteer 用於輕型版本並使用外部鉻）

我試了一下，它只是渲染了一個截圖，與你在 Chrome 瀏覽器上看到的一樣，我使用了rotateX, rotateY, rotateZ和 CSS 屬性的perspective ，效果很好。

享受 ！！！

木偶師： https : //github.com/puppeteer/puppeteer

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

下面是使用 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();
    })();

Answer 4

嘗試style="-webkit-transform: rotate(-90deg);" 而不是變換。

它適用於html-pdf和html2pdf轉換器。