Search code examples
javascriptnode.jsjspdf

Use custom icons for radio button in AcroFormRadioButton jsPDF

I am using jsPdf to generate a pdf. I want to insert a radio button on the pdf using AcroFormRadioButton class. I was able to create radio buttons but now I want to customise the select icons. There seems to be only 2 options for the icons which is Cross and Circle. I want to add something like a tick instead. Any idea how to do that?

Thanks!

Below is the code I used to create radio buttons.

let radioGroup = new doc.AcroFormRadioButton();
let formX = 20, formY = 220, radioSize = 4, radioRadius = 1;
var radioButton1 = radioGroup.createOption("Status1");
var radioButton1 = radioGroup.createOption("Status1");
radioButton1.Rect = [formX, formY, radioSize, radioSize];
doc.roundedRect( formX, formY, radioSize, radioSize, radioRadius, radioRadius, "D" ); 
doc.setFont(undefined, "bold").setFontSize(10).setTextColor(110, 117, 124); 
doc.text("Completed", formX + 7, formY + 3.5);
radioGroup.setAppearance(doc.AcroFormAppearance.RadioButton.Circle); 
// radioGroup.setAppearance(doc.AcroFormAppearance.RadioButton.Cross);
Solution

  • After looking at jsPDF source code, I see that when introduced the description RadioButton (Had only two appearances: Dot and Cross), and that does not seem to have changed to date (Oct 2023).

    NOTE in some Scandinavian countries a checkmark means "Wrong", so a Cross is more likely to be universally understood as Negation ! whilst the O is considered "Affirmative" in Japan.

    Avoid using both alongside each other as confusing enter image description here

    To use such Marks in a different Adobe style such as Diamond Square Check etc. they would need to be altered in the finished PDF.

    In different viewers there can be a wide array of styles, between radio buttons on the left and checkboxes on the right. enter image description here