Add PDF functionality with Flutter

Nutrient Web SDK is a JavaScript PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web app.

This guide walks you through the steps to integrate Nutrient into your project. By the end, you'll be able to render a PDF document in the UI.

Test without installing You can test the SDK capabilities in our playground.

Jump to example Prefer to jump straight to code? View the example repo on GitHub.

Installation

1. Install the Nutrient dependency. In the terminal app, change the location of the current working directory to your project and run the following command to add the Nutrient dependency to your project:

   flutter pub add pspdfkit_flutter

2. Download the framework here. The download will start immediately and will save a .tar.gz archive like PSPDFKit-Web-binary-1.0.0.tar.gz to your computer.

3. Once the download is complete, extract the archive and copy the entire contents of its dist folder to the web/assets directory or any other folder of your choice inside the web subfolder.

4. Make sure your assets folder contains the file nutrient-viewer.js and a nutrient-viewer-lib directory with library assets.

5. Make sure your server has the Content-Type: application/wasm MIME typeset. Read more about this in the troubleshooting section of our guides.

Render a PDF

1. Create a PDFs directory in assets. Rename the PDF document you want to display in your application to document.pdf, and place it in the PDFs directory. You can use this demo document as an example.

2. Specify the assets directory in pubspec.yaml:

   # The following section is specific to Flutter.
   flutter:
   +  assets:
   +    - PDFs/
   ...

3. Include the Nutrient library in your index.html file:

   <script src="assets/nutrient-viewer.js"></script>

4. Import the PSPDFKit package:

   import 'package:pspdfkit_flutter/pspdfkit_flutter.dart';

5. Display a PDF document inside your Flutter app:

   Scaffold(
     body: PspdfkitWidget(
     documentPath: 'file:///path/to/Document.pdf',
     ),
   );

6. Run the app:

   flutter run

Troubleshooting

Example View the example repo on GitHub.

Facing issues? Visit the troubleshooting guide for solutions to some common errors.