如何用JavaScript设置打印导出：分两页输出2D/3D画布内容

我来帮你搞定这个分页打印的问题！核心思路是在打印窗口的HTML内容里插入强制分页符，让浏览器自动把2D和3D图像拆分到不同页面。直接修改你的exportPrint函数就能实现：

this.exportPrint = function(){
    var twoDData = renderer2D.domElement.toDataURL('image/jpeg', 1.0);
    var threeDData = renderer3D.domElement.toDataURL('image/jpeg', 1.0);
    
    var printWin = window.open('','_blank','width=800,height=600');
    if (!printWin) {
        alert('请允许弹出窗口权限以完成打印');
        return;
    }

    // 构建带分页逻辑的打印页面内容
    var printContent = `
        <!DOCTYPE html>
        <html>
        <head>
            <title>Canvas打印</title>
            <style>
                /* 打印专属样式：确保分页生效 + 图片适配页面 */
                @media print {
                    .page-break {
                        page-break-after: always;
                    }
                    img {
                        max-width: 100%;
                        max-height: 100vh;
                        display: block;
                        margin: 0 auto;
                    }
                }
                /* 预览窗口样式，方便查看效果 */
                img {
                    max-width: 100%;
                    margin: 20px auto;
                    display: block;
                    border: 1px solid #eee;
                }
            </style>
        </head>
        <body>
            <!-- 第一页：2D画布内容 -->
            <img src="${twoDData}" alt="2D画布">
            <!-- 强制分页标记 -->
            <div class="page-break"></div>
            <!-- 第二页：3D画布内容 -->
            <img src="${threeDData}" alt="3D画布">
        </body>
        </html>
    `;

    // 写入内容并触发打印
    printWin.document.write(printContent);
    printWin.document.close(); // 必须关闭文档流，否则部分浏览器渲染异常
    printWin.focus();
    // 延迟打印确保图片加载完成
    setTimeout(() => {
        printWin.print();
        // 可选：打印完成后自动关闭窗口
        // printWin.close();
    }, 500);
};

关键细节说明： #

• 分页逻辑：通过.page-break类的page-break-after: always CSS属性，强制浏览器在该元素后开启新页面。你也可以把这个样式直接加在2D图片的容器上，效果一样。
• 图片适配：设置max-width:100%和max-height:100vh，确保图片不会超出打印页面范围，避免被裁剪或变形。
• 兼容性处理：添加了弹出窗口权限提示，避免浏览器拦截导致功能失效；延迟打印的操作是为了确保图片完全加载后再触发打印，防止出现空白页。

你可以根据需求调整图片的边距、边框等样式，或者修改分页的触发方式（比如用page-break-before: always放在3D图片容器前）。

内容的提问来源于stack exchange，提问作者karthickks