1. Home
  2. Forum
  3. React - EJ 2
  4. Inputs with values are being displayed as empty in PDF viewer

Inputs with values are being displayed as empty in PDF viewer

I have a PDF that has inputs, and those inputs have values.

When I try to load the PDF using the PDF Viewer, the PDF loads, but the inputs are empty.

Is there a solution for this?

Example of the PDF that is being used: https://www.canada.ca/content/dam/ircc/documents/pdf/english/kits/forms/imm5476/16-12-2022/imm5476e.pdf

Here is the code:

import { registerLicense } from '@syncfusion/ej2-base';
import {
Inject,
Magnification,
Navigation,
PdfViewerComponent,
Print,
TextSearch,
TextSelection,
ThumbnailView,
Toolbar,
} from '@syncfusion/ej2-react-pdfviewer';
import { observer } from 'mobx-react-lite';
import * as React from 'react';

const LICENSE_KEY =
'key';

interface DocumentPdfViewerSyncfusionPropTypes {
url: string;
}

registerLicense(LICENSE_KEY);

export const DocumentPdfViewerSyncfusion: React.FC<DocumentPdfViewerSyncfusionPropTypes> =
observer(({ url }) => {
if (!url) {
return null;
}

return (
<>
<PdfViewerComponent
id="container"
documentPath={url}
serviceUrl="https://services.syncfusion.com/react/production/api/pdfviewer"
style={{ height: '100%' }}
>
<Inject
services={[
Toolbar,
Magnification,
Navigation,
ThumbnailView,
Print,
TextSelection,
TextSearch,
]}
/>
</PdfViewerComponent>
</>
);
});



9 Replies
CK Chinnamunia Karthik Chinna Thambi Syncfusion Team July 25, 2024 02:32 PM UTC

Hi Alex,

To view the form fields in PDF Viewer, you need to inject the FormFields and FormDesigner modules. We have provided a sample and documentation for this functionality.

 

Sample: Ibdmkd (forked) - StackBlitz

 

Documentation: Feature module in React Pdfviewer component | Syncfusion

 

Screenshot:

 

 

Kindly try this and let us know, if you have any concerns.


AG Alex Ghattas July 25, 2024 02:43 PM UTC

Thank you, when I add those 2 items in, I get the following client side error: 

TypeError: Cannot read properties of null (reading 'includes')

CK Chinnamunia Karthik Chinna Thambi Syncfusion Team July 26, 2024 02:09 PM UTC

Hi Alex,

We have tested the given document in the below sample and the document is loaded in PDF Viewer without any errors. We have provided the screenshot for this.

 

Sample: Ibdmkd (forked) - StackBlitz

 

Screenshot:

 

 

We request that you load the provided document in the above sample and confirm whether it works properly or not. If it works, please provide the modified sample, PDF Viewer version details. If the issue is specific to a document, please provide us with a copy of the PDF file. This information will assist us in further analyzing the problem and providing you with the necessary details.


AG Alex Ghattas July 26, 2024 02:21 PM UTC

Hi there, thanks for the response, can you try using the PDF that I provided here? I am running into the issue with that one.



Attachment: testpdf_b04e0e90.zip

CK Chinnamunia Karthik Chinna Thambi Syncfusion Team July 29, 2024 01:25 PM UTC

Hi Alex,

Thanks for the document. We were able to reproduce the reported scenario “Script error occurs when loading the provided document”. We will analyze further on this and update you with more details in two business days on July 31, 2024.


SK Sathiyaseelan Kannigaraj Syncfusion Team July 31, 2024 11:07 AM UTC

Hi Alex,

We have logged this as a defect as "Script error occurs when loading the provided document" and will include the fix in our weekly NuGet release, which is estimated to be available on August 21, 2024. You can track the status of the issue through the following link.

Feedback link: Script error occurs when loading the provided document | Issue Feedback

Disclaimer: "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization."


Regards,
Sathiyaseelan K


CK Chinnamunia Karthik Chinna Thambi Syncfusion Team August 20, 2024 03:14 PM UTC

Hi Alex,

We have fixed the reported issue "Script error occurs when loading the provided document" and the fix for the reported issue was included in our latest weekly release v26.2.10. Kindly upgrade to that version to get the issue resolved.

 

Root cause: We missed retrieving the checkbox and radio button form fields from the widget types, which caused the form fields to be rendered with the default type as text boxes, resulting in the issue.

 

Solution: We have properly retrieved the form field widgets for all types of form fields and update their properties accordingly. If the widget dictionary contains the parent key, it indicates that the widget is a radio button or checkbox with a group. Therefore, we have checked whether the widget dictionary includes the parent key and then retrieved the necessary values from the parent dictionary.

 

Packages:   

 

CDN Links:

 

https://cdn.syncfusion.com/ej2/26.2.10/dist/ej2.min.js

https://cdn.syncfusion.com/ej2/26.2.10/material.css

https://cdn.syncfusion.com/ej2/26.2.10/dist/ej2-pdfviewer-lib/pdfium.js

https://cdn.syncfusion.com/ej2/26.2.10/dist/ej2-pdfviewer-lib/pdfium.wasm


AG Alex Ghattas August 21, 2024 04:43 PM UTC

Hi there, thank you for the response.


Unfortunately, this is still not working properly.


The errors I am seeing now are:

Client-side error is found. Please check the custom headers provided in the AjaxRequestSettings property and web action methods in the ServerActionSettings property.


And on some other PDFs, some of the pages are not loading and are stuck in the spinning circle.


CK Chinnamunia Karthik Chinna Thambi Syncfusion Team August 22, 2024 01:51 PM UTC

Hi Alex,

The Syncfusion service URL 'https://services.syncfusion.com/react/production/api/pdfviewer' is intended for demo purposes only, and we update this URL frequently based on new changes. We suspect that the issue occurred during one of these update periods. However, we are unable to reproduce the reported issue at this time. We have provided a video recording and sample for your reference.


Sample: Ibdmkd (forked) - StackBlitz


Video: VideoRecording
 

Additionally, you can create your own web service instead of relying on the Syncfusion service URL. Please refer to the documentation link below for instructions on how to create your own web service.


Documentation:  Create pdfviewer service in EJ2 JavaScript Pdfviewer control | Syncfusion


Github sample: EJ2-PDFViewer-WebServices/ASP.NET Core/PdfViewerWebService_6.0 at main · SyncfusionExamples/EJ2-PDFViewer-WebServices (github.com)


Kindly try this and let us know, if you have any concerns.


Loader.
Up arrow icon