使用wkhtmltopdf生成PDF时的单选按钮显示问题

我来帮你排查这个单选按钮的显示问题，结合你提供的HTML和PDF生成代码，整理了几个实用的解决思路：

1. 修复原生单选按钮的渲染样式 #

wkhtmltopdf基于WebKit内核，有时候会因为默认样式被重置或者浏览器打印样式的影响，导致原生单选按钮不显示或显示异常。你可以给单选按钮添加基础CSS强制恢复原生外观：

input[type="radio"] {
    -webkit-appearance: radio; /* 针对WebKit内核的强制设置 */
    appearance: radio;
    width: 16px;
    height: 16px;
    margin-right: 8px; /* 增加和文字的间距，提升可读性 */
}

/* 针对打印媒体的额外样式，避免print-media-type隐藏元素 */
@media print {
    input[type="radio"] {
        display: inline-block !important;
        opacity: 1 !important;
    }
}

把这段样式添加到你的HTML头部，再重新生成PDF试试。

2. 调整wkhtmltopdf的自定义开关参数 #

你当前使用了--print-media-type参数，这个会触发浏览器的打印样式表，部分默认打印样式会隐藏表单元素。可以尝试两个方向：

• 暂时移除--print-media-type参数，测试是否是打印样式导致的问题；
• 保留参数的话，就必须配合上面的@media print样式，强制显示单选按钮。

另外，你设置了固定的PageHeight和PageWidth为300，这个尺寸可能过小导致单选按钮被挤压变形。如果内容允许，可以尝试调整为更合理的尺寸（比如使用毫米单位：PageHeight = Unit.Millimeter(297)对应A4纸），或者去掉固定尺寸让wkhtmltopdf自适应内容。

调整后的C#代码示例（移除--print-media-type）：

var report = new ActionAsPdf("GenerateDetailPdf") 
{ 
    FileName = "LoanDetail_" + loanId + ".pdf", 
    CustomSwitches = "--disable-smart-shrinking --footer-center \"Page: [page] of [toPage]\"", 
    PageHeight = 300, 
    PageWidth = 300, 
    PageMargins = new Margins(10, 0, 10, 0) 
};

3. 升级wkhtmltopdf版本 #

旧版本的wkhtmltopdf对HTML5表单元素的支持存在不少兼容性bug，如果你使用的是较老的版本，建议升级到最新的稳定版，很多表单渲染的问题在新版本中已经被修复。

备选方案：用伪元素模拟单选按钮 #

如果上面的方法都没解决问题，可以尝试用CSS伪元素模拟单选按钮，这种方式在wkhtmltopdf中渲染更稳定，不受原生元素兼容性影响：

模拟样式代码 #

.radio-group {
    margin: 10px 0;
}
.radio-item {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    cursor: pointer;
}
.radio-item input[type="radio"] {
    position: absolute;
    opacity: 0; /* 隐藏原生单选按钮 */
}
.radio-item .radio-dot {
    width: 16px;
    height: 16px;
    border: 2px solid #444;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
}
/* 选中状态的样式 */
.radio-item input[type="radio"]:checked + .radio-dot::after {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #444;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

对应的HTML结构 #

<div class="radio-group">
    <label class="radio-item">
        <input type="radio" name="gender" value="male" checked>
        <span class="radio-dot"></span>
        Male
    </label>
    <label class="radio-item">
        <input type="radio" name="gender" value="female">
        <span class="radio-dot"></span>
        Female
    </label>
    <label class="radio-item">
        <input type="radio" name="gender" value="other">
        <span class="radio-dot"></span>
        Other
    </label>
</div>

这个模拟方案几乎能兼容所有wkhtmltopdf版本，渲染效果也更可控。

内容的提问来源于stack exchange，提问作者R. Patel