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>