We’re facing an issue where users cannot choose options from drop lists after a document has been saved using PDF.js Express. This is reproducible in the demo on your website.
Secondly, the red outline around drop lists is not positioned correctly. Drop lists should probably not be outlined in red as it implies ‘required’ to most of our users, despite the fields not being required at all.
To reproduce:
Upload Original.pdf into the demo.
Choose an option from a drop list field.
Save / Download.
Reload the demo and upload the newly saved pdf.
Try to choose a different option from the same drop list that was used earlier.
We’ve added the issue to our backlog to be worked on in the future. We don’t have a timeline for when it will be fixed but if it does get fixed we’ll let you know when it’s available in an experimental build to test out and the estimated official release date. If you have a desired timeline for having this issue fixed please let us know and we’ll do our best to work with you on how this can fit into the release schedule.
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here
I will update this in our internal ticket. It will be worked on ASAP.
Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.
Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here
We discovered this issue on actual production software using PDF.js Express and later reproduced it on the demo site. It is not limited to the demo site.
It is easily reproducible in your demo given the files and instructions contained within the first post here, so you already have access to code, but here is some of our code as well.
Creating the viewer and loading a PDF document into it:
const viewer = await WebViewer({
licenseKey: licenseKeys.viewer,
path: '3rdparty/pdfjs-express/public',
disableFlattenedAnnotations: true,
}, container_element)
viewer.disableFeatures([
viewer.Feature.LocalStorage,
viewer.Feature.Measurement,
viewer.Feature.FilePicker,
viewer.Feature.Print,
viewer.Feature.MultipleViewerMerging,
viewer.Feature.ThumbnailMerging,
viewer.Feature.ThumbnailReordering,
viewer.Feature.MouseWheelZoom,
])
// default to fit-to-width zoom level
viewer.UI.setFitMode(viewer.UI.FitMode.FitWidth)
// custom form field styling
viewer.Core.Annotations.WidgetAnnotation.getCustomStyles = widget => {
if (widget instanceof viewer.Core.Annotations.TextWidgetAnnotation) {
return {
'background-color': 'lightblue'
}
}
}
// load blob into viewer and wait for it to be loaded before continuing
await new Promise(res => {
viewer.docViewer.on('documentLoaded', res)
viewer.UI.loadDocument(pdf_blob, { extension: 'pdf' })
})
// default to the view tools (has no extra toolbar to show underneath)
viewer.UI.setToolbarGroup('toolbarGroup-View', false)
// default to the pan tool
viewer.UI.setToolMode(viewer.Core.Tools.ToolNames.PAN)
// load annotations using pdf.js express utils
const viewer_utils = new ExpressUtils(licenseKeys.api)
const data = await viewer.docViewer.getDocument().getFileData()
viewer_utils.setFile(data)
const { xfdf } = await viewer_utils.extract()
await viewer.annotManager.importAnnotations(xfdf)