jsPDF AcroForms 中未选中的复选框

Question

examples of jsPDF AcroForm fields in the jsPDF documentation 展示了如何创建 CheckBox 字段，但该字段最初始终处于选中状态。如何创建一个初始化为未选中的复选框？

Answer 1

在深入研究 PDF 规范 (ISO 32000-1:2008) 后，我在第 12.7.4.2.3 节中发现选中和未选中的外观对应于该字段的外观字典中的条目。我下载了这个由 jsPDF 生成的 PDF：

var doc = new jsPDF();
doc.text('CheckBox:', 10, 125);
var checkBox = new CheckBox();
checkBox.fieldName = "CheckBox1";
checkBox.Rect = [50, 120, 30, 10];
checkBox.value = 'Yes'
doc.addField(checkBox);

我在文本编辑器中打开 PDF 并找到了我的字段定义：

<<
/F 4
/Rect [141.73 473.39 226.77 501.73]
/FT /Btn
/T (CheckBox1)
/DA (/F13 0 Tf 0.000 g)
/V /Yes
/Type /Annot
/Subtype /Widget
/Q 1
/MK <<
/CA (3)
>>
/AS /On
/AP <<
/N <</On 7 0 R >>/D <</On 8 0 R /Off 9 0 R >>>>
>>

里面的/N是字典，AS值是CheckBox是否被勾选。所以这意味着您可以通过以下方式控制外观：

checkBox.appearanceState = 'Off' //unchecked
checkBox.appearanceState = 'On' //checked

Answer 2

这是我使用过的两个非常简单的变体：

var doc = new jsPDF('p', 'mm', 'a4');

function checkbox(x, y, length, width) {
doc.rect(x, y, length, width);
doc.line(x, y, x + length, y + width);
doc.line(x, y + length, x + width, y);
}

doc.text(10, 28, 'Checked')
checkbox(10, 30, 2, 2);
checkbox(20, 30, 4, 4);
checkbox(35, 30, 8, 8);
checkbox(55, 30, 12, 12);

doc.text(10, 48, 'Unchecked')
doc.rect(10, 50, 2, 2);
doc.rect(20, 50, 4, 4);
doc.rect(35, 50, 8, 8);
doc.rect(55, 50, 12, 12);

结果： What the checkbox looks like.

jsPDF AcroForms 中未选中的复选框

Unchecked CheckBox in jsPDF AcroForms

jspdf