为 pdf 输出调整 html 复选框的大小答案

【问题标题】：Resizing html Checkboxes for pdf output为 pdf 输出调整 html 复选框的大小
【发布时间】：2013-01-22 17:57:06
【问题描述】：

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

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

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

这样做的可能方法是什么，如果有多个，最佳做法是什么？

【问题讨论】：

我不同意推荐的调整网页复选框大小的方法是 JavaScript。 CSS 是专门为控制 Web 元素的外观而设计的。如果您的所有 HTML 文件都使用一个样式表，那么您可以在该单个样式表中进行 CSS 更改。
如果你愿意，可以不同意，但我看到问题正在解决的每个地方都建议使用 javascript！根据 css 的设计理念是不对的，但考虑到视觉资产（复选框和收音机）是由浏览器提供的。这让事情有点复杂！
我很想看看你的 HTML / JS / CSS。
不。我们最终的解决方案是创建 svg 图像。通过 css 调整大小太不一致了。

标签： html css pdf wkhtmltopdf

【解决方案1】：

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

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

希望这对某人有所帮助。

【讨论】：

刚刚遇到了与 mpdf 类似的问题。这是正确答案 - 但请注意：您必须将 class="xy" 设置为输入元素。似乎 input[type=checkbox] 不适用于 mpdf。所以使用 .xy{font-size: 20pt;}
Brabino 和@Rene 的解决方案都不适合我。尽管复选框周围确实有更多空白，就像填充或边距增加一样，但复选框本身的大小与以前相同。我正在使用 wkhtmltopdf 0.12.5（带有修补的 qt）

【解决方案2】：

您是否尝试设置打印样式表以查看它是否影响输出？

@media print { /* css code */ }

【讨论】：

【解决方案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/

【讨论】：

它并没有真正起作用。虽然它确实使用了 webkit，但正是这些调整的结果有点不确定......
另外值得注意的是 wkhtmltopdf，在渲染复选框和收音机时，使用 svg 图像（因为您可能还记得图形通常由浏览器生成，而 wkhtmltopdf 是 Webkit，但不是真正的浏览器。）