Hello, I’m facing an issue when rendering a form containing only checkbox, when a check box is filled with a value, it render it as a radio button with red background and black circle inside, instead of tick with green background. Is the inferrence of widgets is define by specific field values ?
I’m using pdf.js express 8.7 an dit’s doing it actually on all PDF.
For informations default value for my checkbox is “Oui” !
Hi @henri.piot
Could you provide a PDF where this is happening?
Also could you check the widget type before and after clicking the checkboxes?
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
Hi,
There you will find 2 pdf, fcp_1_preprose_uhc.pdf which is a blank version ready to be fill. and fcp_1_prepose_uhc_lou_oderkerken_20230111.pdf which is the same file filled by pdf.js express, on my computer, when i open this completeed file with pdf.js express it render as in the image “bad rendering” is that helping you ?
fcp_1_prepose_uhc_lou_oderkerken_20230111 (1).pdf (425.8 KB)
fcp_1_prepose_uhc.pdf (387.1 KB)
Thank you for those documents.
While testing the form on the PDFjs Express Demo site (PDF.js Viewer Demo | PDF.js Express) the checkboxes are being rendered correctly. Can you confirm this?
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
This is what i got when I try, so no, i want it to show as tick on green gb !
By investigating the code i guess that it’s rendering as Radio and not as checkboxes
This is with unfilled form on the demo site. The checkboxes are ticked with a green background.
I think you are correct that somewhere in your code you are setting clicked checkboxes as radio buttons.
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
The unfilled form work as expected, the issue is only on the filled one, I sended you the unfilled one to show you the difference, what do you have when you try with the filled one ?
Ah sorry for the misunderstand. Yes I can see that in express the checkboxes are being rendered as radio buttons.
Can you share with me how you are saving and downloading the file created with express?
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
Sure,
First I need to add that when you open the file with “preview” (apple) or abobe reader it is render as checkbox correctly.
To explain the process, I get the file from S3 with python on my back end and then i converted it to base64 and pass it ton my js as such :
DOWNLOAD :
WebViewer({
path: '/static/formation/PDFJSExpress/lib', // path to the PDF.js Express'lib' folder on your server
licenseKey: 'Insert commercial license key here after purchase',
disabledElements: [
// 'viewControlsButton',
// 'viewControlsOverlay',
// "fitButton",
// "leftPanelButton",
// "shapeToolGroupButton"
"toolbarGroup-Annotate",
"toolbarGroup-Shapes",
"toolbarGroup-Insert",
"viewControlsButton",
"toggleNotesButton",
"selectToolButton",
"panToolButton",
"crossStampToolButton",
"checkStampToolButton",
"rubberStampToolGroupButton",
"eraserToolButton"
],
}, document.getElementById('viewer'))
.then(instance => {
instance.UI.setLanguage('fr');
instance.UI.loadDocument(base64ToBlob('{{base64_string}}'), { filename: 'myfile.pdf' });
});
Python code:
@staticmethod
def pdf_to_base64_on_s3(bucket, pdf_file_name):
s3 = boto3.resource(
service_name='s3',
region_name='eu-west-3',
aws_access_key_id=os.environ['AWS_ACCESS_KEY_ID'],
aws_secret_access_key=os.environ['AWS_SECRET_ACCESS_KEY']
)
# s3 = boto3.client('s3', aws_access_key_id=os.environ['AWS_ACCESS_KEY_ID'], aws_secret_access_key=os.environ['AWS_SECRET_ACCESS_KEY'])
obj = s3.Object(bucket, pdf_file_name)
string = obj.get()['Body'].read()
b64_encoded_pdf = base64.b64encode(string).decode('utf-8')
return b64_encoded_pdf
SAVING:
To save I use the API to merge the pdf and after that I convert the blob into a js file container to assign it to a file input in a post form to retreive my document in my backend to save it on S3 and in my database :
function saveBlobToServer(blob) {
var file = new File([blob], "{{formation_name}}");
let container = new DataTransfer();
container.items.add(file);
console.log(container)
file_input = document.getElementById("id_pdf-pdf");
file_input.files = container.files;
console.log(file_input.files)
document.getElementById("form-view").classList.toggle('hidden')
document.getElementById("button-view").classList.toggle('hidden')
}
// This in in the WebViewer wrapper
const { documentViewer, annotationManager } = instance.Core;
// a callback function to some "download" button
document.getElementById("send").addEventListener("click", () => {
const onSave = async () => {
document.getElementById("spinner").classList.toggle("hidden")
document.getElementById("send").disabled = true;
const xfdf = await annotationManager.exportAnnotations({ links: false, widgets: true });
const fileData = await documentViewer.getDocument().getFileData({});
const blob = new Blob([fileData], { type: 'application/pdf' });
const data = new FormData();
data.append('xfdf', xfdf);
data.append('file', blob);
data.append('license', "");
// Process the file
const response = await fetch('https://api.pdfjs.express/xfdf/merge', {
method: 'post',
body: data
}).then(resp => resp.json());
const { url, key, id } = response;
// Download the file
const mergedFileBlob = await fetch(url, {
headers: {
Authorization: key
}
}).then(resp => resp.blob())
// Do something with blob...
// save(mergedFileBlob)
saveBlobToServer(mergedFileBlob);
}
onSave()
});
Thanks for that.
After reviewing the XFDF it looks like a radio button flag is being added, explaining the incorrect behaviour.
I’ve created a bug ticket to be worked on internally, I will let you know once this issue is fixed.
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
Thank you, How many time do you expect this ticket to be fixe ?
Unfortunately I do not have a timeline for when this will be fixed.
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
Can you confirm me that this issue appear with the reader, that is, when a document is loaded ? when it will be fix, event with document that had been filled, they will render correctly ?
Yes, when fixed, the checkboxes will render correctly.
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
Hello, while waiting for the fix I bougth the premium packages but hte watermark does not disseapear, can you help me ?
Of course, the watermark will persist in localhost environments but will disappear in production.
Is this your case?
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
No it stay on production, I also use the API to merge anootation and the watermark is not here so it works well !
And you are using the new bought license key in the constructor?
import WebViewer from '@pdftron/pdfjs-express'
WebViewer({
licenseKey: "YOUR_KEY_HERE",
...
})
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
Yes of course, as I said, i’ve done the same thing than the API licence key and it worked perfectly
Sorry I am a little confused by what you mean with the API license key?
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.