wkhtmltopdf转换PDF样式异常问题求助

一、修复wkhtmltopdf的复选框样式问题 #

你的命令存在参数冲突：同时设置了--disable-javascript和--javascript-delay/--run-script，禁用JS后所有脚本都不会执行，包括你用来隐藏按钮的代码，这也可能导致依赖JS的样式渲染失效。首先需要去掉--disable-javascript参数。

另外，wkhtmltopdf基于旧版WebKit引擎，对原生表单控件的样式支持和现代浏览器差异极大，核心解决方法是用CSS自定义复选框样式，完全替换原生控件，确保在wkhtmltopdf和浏览器中渲染一致。

示例自定义复选框CSS：

/* 隐藏原生复选框 */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  position: relative;
}

/* 选中状态样式 */
input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

/* 选中后的对勾 */
input[type="checkbox"]:checked::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
}

将这段CSS嵌入表单HTML，或通过外部样式表加载（--enable-local-file-access参数已开启，可正常访问本地资源）。

调整后的wkhtmltopdf命令：

ProcessBuilder pb = new ProcessBuilder(
                "wkhtmltopdf",
                "--enable-local-file-access",
                "--cookie", "JSESSIONID", sessionId,
                "--javascript-delay", "5000",
                "--page-size", "A4",
                "--zoom", "1.3",
                "--run-script", "document.getElementById('BottomButtons').style.display='none';",
                eformHtmlUrl, pdfFilePath
            );

二、Chrome Headless替代实现（完整Java代码示例） #

Chrome Headless基于最新Chromium引擎，样式渲染和浏览器完全一致，以下是可直接复用的实现：

import java.io.IOException;

public class ChromePdfGenerator {
    public static void generatePdf(String sessionId, String eformHtmlUrl, String pdfFilePath) throws IOException {
        // 根据操作系统调整Chrome路径：Windows为chrome.exe，Linux为google-chrome，Mac为/Applications/Google Chrome.app/Contents/MacOS/Google Chrome
        String chromePath = "google-chrome";
        
        ProcessBuilder pb = new ProcessBuilder(
                chromePath,
                "--headless=new", // 新版无头模式，稳定性更强
                "--disable-gpu",
                "--no-sandbox", // 非root用户需添加，避免权限拦截
                "--print-to-pdf=" + pdfFilePath,
                "--print-to-pdf-no-header",
                "--cookie", "JSESSIONID=" + sessionId,
                "--virtual-time-budget=5000", // 等待5秒确保页面完全加载
                eformHtmlUrl
        );

        // 隐藏按钮可直接在HTML的onload事件中加入：window.onload = () => document.getElementById('BottomButtons').style.display='none';
        
        Process process = pb.start();
        try {
            int exitCode = process.waitFor();
            if (exitCode != 0) {
                throw new IOException("Chrome Headless生成PDF失败，退出码：" + exitCode);
            }
        } catch (InterruptedException e) {
            Thread.currentThread().interrupt();
            throw new IOException("生成PDF被中断", e);
        }
    }
}

注意事项：

• 确保服务器已安装Chrome/Chromium浏览器
• 优先在HTML的onload事件中处理按钮隐藏逻辑，比通过Chrome参数更可靠

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