调整 html 复选框的大小以用于 pdf 输出

Question

这是泡菜。要调整 html 中复选框的大小，通常建议您使用 js 强制浏览器调整元素的大小。

然而，在我们的例子中，我们使用的是 wkhtmltopdf （一个命令行转换器，利用 webkit 创建 html 输出，然后将其转换为 PDF），据我所知，它不执行 js。

在这种情况下，我们仍然需要缩小一些复选框和单选按钮（实际上，“某些”是错误的 - 一大堆！）

执行此操作的可能方法是什么？如果有多种方法，最佳实践是什么？

Answer 1

我知道这是很旧的线程，但我遇到了同样的问题，并且在任何地方都没有找到正确的答案，所以我想帮助其他有类似问题的人。我正在处理 mdpf 生成的 pdf 中复选框的大小。唯一有效的是字体大小。尝试这样的事情：

<input type='checkbox' style='font-size: 20pt;'>

希望这对某人有帮助。

Answer 2

您是否尝试过设置打印样式表来看看它是否会影响输出？

@media print { /* css code */ }

Answer 3

您尝试过使用 CSS 来改变它们的大小吗？这在基于 webkit 的浏览器 Chrome 中运行良好。

input.big{
  height: 2em;
  width: 2em;
}

input.small{
  height: 0.5em;
  width: 0.5em;    
}

<input type="checkbox" id="small" class="small"/><label for="small">Small</label>
<input type="checkbox" id="big" class="big"/><label for="big">Big</label>

http://jsfiddle.net/Q8AzW/

Answer 4

样式 pt 对字体大小的更改对我的输出不起作用。但有一个 PDF 属性“转换”有效。您也可以使用小数点。 1.5 效果最好，而 2 则使单选按钮或复选框太大。

$"<input style=\"transform: scale(1.5);\" type=\"checkbox\" id=\"{q.Id}\" data-pdf-form-field=\"true\" name=\"foobar\" {check}>"