Error opening a PDF document in flutter Web using SfPdfViewer "There was an error opening this document" #2252

cfiorillo · 2025-01-15T12:05:56Z

Bug description

Open a specific PDF document in flutter web using SfPdfViewer returns an error. In attach the offending PDF document.
FailingDocument.pdf

Steps to reproduce

Create a new flutter web application
flutter create testpdf
Add syncfusion_flutter_pdfviewer package
flutter pub add syncfusion_flutter_pdfviewer
Add the needed javascript to the index.html in the body of the document

<script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<script type="text/javascript">
   pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js";
</script>

Add the pdf to the assets (folder assets/pdf) and declare it in pub spec.yaml:

  assets:
    - assets/pdf/FailingDocument.pdf

Add in the main screen a SfPdfViewer loading the PDF from assets:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

...

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SfPdfViewer.asset("assets/pdf/FailingDocument.pdf"),
    );
  }

Run the application
The error is raised, no errors in console

Code sample

main.dart

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SfPdfViewer.asset(
        "assets/pdf/FailingDocument.pdf",
        onDocumentLoadFailed:(PdfDocumentLoadFailedDetails details) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text("${details.error} # ${details.description}"),
              backgroundColor: Colors.red,
              duration: Duration(seconds: 3),
              behavior: SnackBarBehavior.floating,
            ),
          );
        }
      ),
    );
  }
}

index.html

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="testpdf">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>testpdf</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script src="flutter_bootstrap.js" async></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
  <script type="text/javascript">
    pdfjsLib.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js";
  </script>
</body>
</html>

pubspec.yaml

name: testpdf
description: "A new Flutter project."
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ^3.6.0

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.8
  syncfusion_flutter_pdfviewer: ^28.1.39

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^5.0.0

flutter:
  uses-material-design: true

  assets:
    - assets/pdf/FailingDocument.pdf

Screenshots or Video

Video demonstration

ScreenRecBug.mov

Stack Traces

[Add the Stack Traces here]

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.27.1, on macOS 15.2 24C101 darwin-x64, locale it-IT)
    • Flutter version 3.27.1 on channel stable at /Users/ciro/Dati/Sorgenti/_tools/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 17025dd882 (4 weeks ago), 2024-12-17 03:23:09 +0900
    • Engine revision cb4b5fff73
    • Dart version 3.6.0
    • DevTools version 2.40.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/ciro/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Users/ciro/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 21.0.4+-12422083-b607.1)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16C5032a
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2)
    • Android Studio at /Users/ciro/Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.4+-12422083-b607.1)

[✓] IntelliJ IDEA Ultimate Edition (version 2024.3.1.1)
    • IntelliJ at /Users/ciro/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] IntelliJ IDEA Community Edition (version 2024.3.1.1)
    • IntelliJ at /Users/ciro/Applications/IntelliJ IDEA Community Edition.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.86.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (4 available)
    • VTR L09 (mobile)  • 6PQ0217904000641          • android-arm64  • Android 9 (API 28)
    • iScorpyo (mobile) • 00008110-000A0C5C21DA801E • ios            • iOS 18.1.1 22B91
    • macOS (desktop)   • macos                     • darwin-x64     • macOS 15.2 24C101 darwin-x64
    • Chrome (web)      • chrome                    • web-javascript • Google Chrome 131.0.6778.265

[✓] Network resources
    • All expected network resources are available.

• No issues found!

The text was updated successfully, but these errors were encountered:

Deepak1799 · 2025-01-16T15:15:25Z

Hi @cfiorillo ,

We are able to replicate the reported issue that the specific document is not loaded in the Flutter PDF Viewer. Currently, we are validating this issue and we will update further details once we find the root cause of this issue

Regards,
Deepak G

VijayakumarMariappan added pdf viewer PDF viewer component open Open labels Jan 16, 2025

Deepak1799 added follow-up scheduled Follow-up scheduled and removed open Open labels Jan 16, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error opening a PDF document in flutter Web using SfPdfViewer "There was an error opening this document" #2252

Error opening a PDF document in flutter Web using SfPdfViewer "There was an error opening this document" #2252

cfiorillo commented Jan 15, 2025

Deepak1799 commented Jan 16, 2025

Error opening a PDF document in flutter Web using SfPdfViewer "There was an error opening this document" #2252

Error opening a PDF document in flutter Web using SfPdfViewer "There was an error opening this document" #2252

Comments

cfiorillo commented Jan 15, 2025

Bug description

Steps to reproduce

Code sample

Screenshots or Video

Stack Traces

On which target platforms have you observed this bug?

Flutter Doctor output

Deepak1799 commented Jan 16, 2025