How to read PDF file in Syncfusion Flutter PDF Library?

The Flutter PDF library is used to create, read, and edit PDF documents. Using this library, you can read an existing PDF file and save it using the Flutter.

Steps to read an existing PDF document programmatically:

1. Create a new Flutter application project.

2. Open Visual Studio Code (After installing the Dart and Flutter extensions as stated in this setup editor page).

3. Click View -> Command Palette.

3. Type Flutter and choose Flutter: New Project.

4. Enter the project name and press the Enter button.
5. Now choose the location of the project.

Add the following code in your pubspec.yaml file to install the syncfusion® flutter pdf package in your application. It will be automatically downloaded from the pub once you trigger the flutter pub get a comment or Get packages option from the Visual studio code.

2. dependencies:
     syncfusion_flutter_pdf: ^20.3.49
   

1. Import the following package in main.dart file.

   import 'package:syncfusion_flutter_pdf/pdf.dart';
   

3. Add the following code in the lib/main.dart file to create a simple button.

   @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
                TextButton(
               child: Text(
                 'Read PDF',
                 style: TextStyle(color: Colors.white),
               ),
               style: ButtonStyle(
                   backgroundColor: MaterialStateProperty.resolveWith(
                       (states) => Colors.blue)),
               onPressed: _readPDF,
             )
             ],
           ),
         ),
       );
     }
   

4. Add the following code to the _readPDF function to read and write text in an existing PDF document programmatically.

   Future<void> _readPDF() async {
     //Load the PDF document
     final PdfDocument document =
         PdfDocument(inputBytes: await _readDocumentData('sample.pdf'));
    
     //Get the pages count
     int count = document.pages.count;
    
     //Create the PDF standard font
     PdfFont font = PdfStandardFont(PdfFontFamily.helvetica, 10);
    
     for (int i = 1; i <= count; i++) {
       //Draw text to the page
       document.pages[i - 1].graphics.drawString('Page $i of $count', font,
           bounds: Rect.fromLTWH(20, 20, 0, 0), brush: PdfBrushes.red);
     }
     
     //Save the document.
       List<int> bytes = await document.save();
       // Dispose the document.
       document.dispose();
    
       //Save the file and launch/download.
       SaveFile.saveAndLaunchFile(bytes, 'output.pdf');
    
     }
    
   

5. Use the following code to load an existing PDF document in the Flutter project.

1. Add the following code in your pubspec.yaml file.

   flutter:
     # To add assets to your application, add an assets section, like this:
     assets:
       - assets/pdf/
   

2. Import the following package in your main.dart file.

   import 'package:flutter/services.dart';
   

3. Add the following code in the lib/main.dart file to read the existing PDF document.

   Future<List<int>> _readDocumentData(String name) async {
     final ByteData data = await rootBundle.load('assets/pdf/$name');
     return data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
   }
   

6. Follow the below steps to launch the generated PDF file on desktop, mobile, and web.

Web:

1. Add the web package as a dependency in your pubspec.yaml file. Then, create a new Dart file named save_file_web.dart. Finally, add the following code to implement the file download functionality using the web package.

   import 'dart:convert';
   import 'package:web/web.dart' as web;

2. To enable file saving and initiate downloads in a Flutter web environment, use the following code within the saveAndLaunchFile method.

   // Function to save and launch a file for download in a web environment
   Future<void> saveAndLaunchFile(List<int> bytes, String fileName) async {
     final web.HTMLAnchorElement anchor =
         web.document.createElement('a') as web.HTMLAnchorElement
           ..href = "data:application/octet-stream;base64,${base64Encode(bytes)}"
           ..style.display = 'none'
           ..download = fileName;
   
   // Insert the new element into the DOM
   web.document.body!.appendChild(anchor);
   
   // Initiate the download
   anchor.click();
   // Clean up the DOM by removing the anchor element
   web.document.body!.removeChild(anchor);
   }

Desktop and Mobile:

3. Add the following dependencies in your pubspec.yaml file.

   open_file: ^3.2.1
   path_provider: ^2.0.11 #Open source library to launch the PDF file in mobile devices
   

4. Create a new dart file named save_file_mobile_and_desktop.dart under the lib folder and import the following packages in save_file_mobile_and_desktop.dart file.

   import 'dart:io';
   import 'package:open_file/open_file.dart';
   import 'package:path_provider/path_provider.dart';
   

5. Include the following code snippet in save_file_mobile_and_desktop.dart to open the PDF document in Desktop and Mobile.

   class SaveFile {
     static Future<void> saveAndLaunchFile(
         List<int> bytes, String fileName) async {
       //Get external storage directory
       Directory directory = await getApplicationSupportDirectory();
       //Get directory path
       String path = directory.path;
       //Create an empty file to write PDF data
       File file = File('$path/$fileName');
       //Write PDF data
       await file.writeAsBytes(bytes, flush: true);
       //Open the PDF document in mobile
       OpenFile.open('$path/$fileName');
     }
   }
    
   

7. Run the sample using the flutter run command. This will read an existing PDF document and draw text on the loaded page. After the application launches, you will get the PDF document as follows.

A complete working sample can be downloaded from ReadPdfSample.zip.

Take a moment to peruse the documentation, where you can find other options like inserting pages in an existing PDF document, and removing pages from a PDF document. Also, the features like extract or find text from PDF documents with code examples. 

Conclusion

I hope you enjoyed learning about how to read PDF file in Syncfusion® Flutter PDF Library.

You can refer to our  Flutter PDF feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter PDF documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!