jsPDF的html方法无法保留CSS transform旋转规则如何解决？

问题复现 #

使用jsPDF的html()方法转换HTML为PDF时，带有transform: rotate(-90deg)样式的图片无法显示，移除该CSS规则后元素正常显示。测试代码如下：

<!DOCTYPE html>
<html>
    
<head>
    <meta charset="UTF-8">
    <title>HTML Test File</title>
</head>

<body>
    <div id="myHTML">
        <div id="zTexte" style="ont-size:16px; margin-top: 18px;">Roland Garros</div>    
        <img id="leCourt2" src="IMAGES/iconesTerrain/courtQuick.png"  style="width: 560px;  top:57px; left: 6px; margin: auto" alt="none">
        <img src='IMAGES/iconesTerrain/EleveG.png' style='top: 211px; width: 33; height: 33px; left: 94px; position: absolute;' alt="none">
        <img src='IMAGES/iconesTerrain/banc.png' style='top: 123px; width:32px; height: 23px; left: 191px; position: absolute; transform: rotate(-90deg);' alt="none">
    </div>

    <script src="../JS/jspdf.debug.min.js"></script>
    <script src="../JS/html2canvas.1.4.1.min.js"></script>

    <script>        
        var myPDF = new jsPDF ({
                            orientation: 'landscape',
                            unit: 'px', 
                            format: 'a4',
                            compress: 'true'// inefficient
                         }),
            source = document.getElementById('myHTML');

        myPDF.html( source, { callback: myPDF => { myPDF.output('datauri'); } });
        
    </script>
</body>
</html>

问题原因 #

你使用的html2canvas 1.4.1版本对CSS transform: rotate() 结合绝对定位的支持存在缺陷。jsPDF的html()方法底层依赖html2canvas将HTML转为画布，当元素同时设置position: absolute和transform: rotate时，html2canvas计算元素位置出现偏差，导致元素被渲染到PDF可视区域外，所以无法显示。

解决办法 #

方法1：升级html2canvas到最新版本 #

新版html2canvas修复了大量CSS变换的兼容问题，直接替换为最新稳定版后，旋转元素通常能正常渲染。

方法2：手动用jsPDF实现图片旋转 #

如果不想升级库，可以绕开html2canvas的兼容问题，单独处理带旋转的图片：

1. 隐藏页面中带旋转的图片，让html2canvas只渲染其他元素；
2. 单独加载该图片，通过jsPDF的addImage()方法添加到PDF，并设置旋转参数。

修改后的代码示例：

<!DOCTYPE html>
<html>
    
<head>
    <meta charset="UTF-8">
    <title>HTML Test File</title>
    <style>
        .hidden { display: none; }
    </style>
</head>

<body>
    <div id="myHTML">
        <div id="zTexte" style="font-size:16px; margin-top: 18px;">Roland Garros</div>    
        <img id="leCourt2" src="IMAGES/iconesTerrain/courtQuick.png"  style="width: 560px;  top:57px; left: 6px; margin: auto" alt="none">
        <img src='IMAGES/iconesTerrain/EleveG.png' style='top: 211px; width: 33px; height: 33px; left: 94px; position: absolute;' alt="none">
        <!-- 隐藏带旋转的图片，避免html2canvas渲染 -->
        <img id="bancImg" src='IMAGES/iconesTerrain/banc.png' class="hidden" alt="none">
    </div>

    <script src="../JS/jspdf.debug.min.js"></script>
    <script src="../JS/html2canvas.1.4.1.min.js"></script>

    <script>        
        var myPDF = new jsPDF ({
                            orientation: 'landscape',
                            unit: 'px', 
                            format: 'a4',
                            compress: 'true'
                         }),
            source = document.getElementById('myHTML');

        // 先渲染其余内容到PDF
        myPDF.html(source, { 
            callback: function(pdf) {
                // 加载目标图片
                const rotateImg = new Image();
                rotateImg.src = 'IMAGES/iconesTerrain/banc.png';
                rotateImg.onload = function() {
                    // 注意：旋转后图片宽高互换，同时调整坐标适配旋转原点
                    pdf.addImage(
                        rotateImg, 
                        'PNG', 
                        191,  // 原left值
                        123,  // 原top值
                        23,   // 旋转后的宽度（原高度）
                        32,   // 旋转后的高度（原宽度）
                        '', 
                        'FAST', 
                        -90   // 旋转角度
                    );
                    // 输出PDF
                    pdf.output('datauri');
                }
            } 
        });
        
    </script>
</body>
</html>

方法3：调整CSS布局方式 #

尝试移除position: absolute，改用相对定位+margin等布局方式配合transform: rotate，部分场景下能绕过html2canvas的bug，但兼容性取决于具体布局需求。

另外，测试代码里有个小错误：ont-size:16px应为font-size:16px，建议修正。

内容的提问来源于stack exchange，提问作者Brice C.