首页 > 解决方案 > 使用 jsPDF 创建单选按钮

问题描述

我正在使用jsPdf在客户端生成 pdf,文档真的让我很困惑。我想在 pdf 上插入一个单选按钮。在官方文档中有 AcroFormRadioButton 类,列出了此类的构造函数和函数成员,我无法使用 文档上的构造函数创建新对象。我找到了一个可以创建新单选按钮的代码,但我不明白:

      var doc =  new jsPDF('p', 'pt', [ 595.28,  841.89])
      doc.setFontSize(10);
      doc.text(87.03635, 24.691223, 'Original');
      var radioGroup = new RadioButton();
      radioGroup.V = "/Test";
      radioGroup.Subtype = "Form";
      doc.addField(radioGroup);
      var radioButton1 = radioGroup.createOption("Test");
      radioButton1.Rect = [87.0363, 24.691223, 20, 20];
      radioButton1.AS = "/Test";
      radioGroup.setAppearance(AcroForm.Appearance.RadioButton.Circle);
      doc.save('Test.pdf');

在官方文档中我找不到 RadioButton() 构造函数和用于创建单选按钮的方法,我查看了 jsPDF 的源代码,但同样的问题。

我应该在哪里查看 jsPdf 的文档/源代码,以了解此代码。

标签: javascriptjspdf

解决方案


这个演示网站非常有用 - http://raw.githack.com/MrRio/jsPDF/master/

在下拉列表中,选择 AcroForms,它会为每个表单元素进行快速而肮脏的设置。

这是简短的版本:

/* global jsPDF */
var doc = new jsPDF();
var {
  RadioButton,
  Appearance
} = jsPDF.AcroForm;


doc.text("RadioGroup:", 50, 165);
var radioGroup = new RadioButton();
radioGroup.value = "Test";
radioGroup.Subtype = "Form";

doc.addField(radioGroup);

var radioButton1 = radioGroup.createOption("Test");
radioButton1.Rect = [50, 170, 30, 10];
radioButton1.AS = "/Test";

var radioButton2 = radioGroup.createOption("Test2");
radioButton2.Rect = [50, 180, 30, 10];

var radioButton3 = radioGroup.createOption("Test3");
radioButton3.Rect = [50, 190, 20, 10];

radioGroup.setAppearance(Appearance.RadioButton.Cross);

我需要稍微改变构造函数的导入和使用:

// import
const jsPDF = require('jspdf');
const doc = jsPDF('p', 'pt'); 

// then using the radio button constructor
var radioGroup = new doc.AcroFormRadioButton();

// and using 'appearance'
radioGroup.setAppearance(doc.AcroFormAppearance.RadioButton.Cross);

希望有帮助。


推荐阅读