Articles in this section
Category / Section

How to load a PDF document from Firebase Storage in Syncfusion Flutter PdfViewer?

2 mins read

This article explains how to load a PDF document from Firebase Storage in the Syncfusion® Flutter PDF Viewer.

 

The Syncfusion® Flutter PDF Viewer widget provides support for loading a PDF document from Firebase Storage. Follow these steps to load the PDF document on the web.

 

Step 1: Add the Firebase Storage dependency in the pubspec.yaml file.

dependencies:
  syncfusion_flutter_pdfviewer: ^20.2.45-beta
  firebase_storage: ^10.2.9

 

Step 2: Import the following dependencies in your main.dart.

import 'package:firebase_storage/firebase_storage.dart' as firebase_storage;
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';

 

Step 3: In the web/index.html file, add the following scripts to include the Firebase Storage SDKs and initialize Firebase.

<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script>
  var firebaseConfig = {
  apiKey: "AIzaSyD3kd5vMAOxwPdQiU1pTpoWrGZr9ZzuU-g",
  projectId: "flutter-web-app-edc4a",
  storageBucket: "flutter-web-app-edc4a.appspot.com",
  appId: "1:593342140687:web:6f2d86d0b9aa628bbd6e7a",
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

 

Step 4: Create a JSON file (cors.json) in your application directory path that contains the following configuration for setting up CORS on your bucket.

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

 

The following code explains how to load a PDF document from Firebase Storage in the Syncfusion® Flutter PDF Viewer. The getPdfBytes( ) method is used to convert the Firebase Storage PDF document into bytes and then load the bytes using SfPdfViewer.memory, which is used to load a PDF document from memory or bytes.

 

Uint8List? _documentBytes;
String path =
    'https://firebasestorage.googleapis.com/v0/b/flutterfirebase-6c279.appspot.com/o/GIS.pdf?alt=media&token=51654170-c140-4ffa-ae1a-9fb431d0dee2';

@override
void initState() {
  getPdfBytes();
  super.initState();
}

void getPdfBytes() async {
  if (kIsWeb) {
    firebase_storage.Reference pdfRef =
        firebase_storage.FirebaseStorage.instanceFor(
                bucket: 'flutter-web-app-edc4a.appspot.com')
            .refFromURL(path);
    // Size mentioned here is the max size to download from Firebase.
    await pdfRef.getData(104857600).then((value) {
      _documentBytes = value;
      setState(() {});
    });
  } else {
    HttpClient client = HttpClient();
    final Uri url = Uri.base.resolve(path);
    final HttpClientRequest request = await client.getUrl(url);
    final HttpClientResponse response = await request.close();
    _documentBytes = await consolidateHttpClientResponseBytes(response);
    setState(() {});
  }
}

@override
Widget build(BuildContext context) {
  Widget child = const Center(child: CircularProgressIndicator());
  if (_documentBytes != null) {
    child = SfPdfViewer.memory(
      _documentBytes!,
    );
  }
  return Scaffold(
    appBar: AppBar(title: const Text('Syncfusion Flutter PDF Viewer')),
    body: child,
  );
}

 

Load PDF from Firebase storage-SfPdfViewer-Flutter

 

A complete working sample can be downloaded from this link.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied