Problems with Flutter web PDF rendering

[gianlucainnocente]

Bug description

With some PDF, the viewer is not rendering well.
You can try using attached pdf.

I also attached two screenshots:

• using flutter web
• using a simple pdf viewer (is ok using mac, chrome viewer, windows viewer, etc)

modulo.pdf

Steps to reproduce

1. Create a simple Flutter web app with the following widget:

SfPdfViewer.network( 'PASTE HERE PDF URL', );

Code sample

Code sample

SfPdfViewer.network(
          'PASTE HERE PDF URL',
);

Screenshots or Video

Screenshots / Video demonstration

modulo.pdf

Stack Traces

Stack Traces

No errors or stack traces

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.24.5, on macOS 15.1.1 24B2091 darwin-arm64, locale it-IT)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] Android Studio (version 2022.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.2.4)
[✓] VS Code (version 1.96.4)
[✓] Connected device (3 available)
    ! Error: Browsing on the local area network for iPhone 14 Pro (2). Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
    ! Error: Browsing on the local area network for iPhone 15 Pro. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

[immankumarsync]

Hi @gianlucainnocente,
We are unable to replicate the issue, and the provided PDF document is rendered correctly on our end on the web platform. Please find the video recording below for reference. We have compared the output of the SfPdfViewer widget with Adobe Reader, and both renderings appear similar on our end.

20250130-0727-44.2518870.mp4

Please share the pdf.js script code that is used in the web/index.html file.

Could you please try using the script reference provided below if it is not already being used as described and confirm us whether the issue is resolved or not?

<script>
  const version = '4.10.38';
  const pdfjsLibUrl = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.min.mjs`;
  const pdfjsWorkerUrl = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.worker.min.mjs`;
  const loadPdfJs = async () => {
    try {
      const pdfjsLib = await import(pdfjsLibUrl);
      pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorkerUrl;
      console.log('PDF.js loaded successfully');
    } catch (error) {
      console.error('Error loading PDF.js:', error);
    }
  };
  loadPdfJs();
</script>

[gianlucainnocente]

Hello @VijayakumarMariappan , we updated the code with the provided one but the issue still persists with some PDF. Can we check something else?

[immankumarsync]

@gianlucainnocente,
Kindly share the following information to help us analyze this issue further:

1. A simple sample where the issue can be replicated.
2. A screen recording or screenshots highlighting the affected areas.
3. The browser and version in which the issue occurs.
4. If the issue is observed on a deployed website, please share the website link (if applicable) or the steps on how the website is deployed.

This enables us to provide you with a better solution at the earliest.

[gianlucainnocente]

@immankumarsync can i send you it privately? Because i cannot share the link and the name of my client.
Thanks

[immankumarsync]

@gianlucainnocente, you can create a ticket in our support portal to share the requested details. We will check and revert soon.

[Deepak1799]

@gianlucainnocente , We are closing this issue and request you to create a ticket in our support portal and share the requested details.