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 Web SDK into your project. By the end, you’ll be able to render a PDF document in the user interface (UI).
You can test the SDK capabilities in our playground.
Prefer to jump straight into code? View the example repo on GitHub.
Installing the Nutrient dependency
You can load Nutrient Web SDK directly from Nutrient’s content delivery network (CDN). Nutrient maintains the CDN for customers, and it’s a good way to get started. For more control and flexibility, use the local installation option.
Add the following
script
tag to the<head>
section of yourweb/index.html
file:Make sure to update the version number (
@1.1.0
) to the latest supported version of Nutrient Web SDK for optimal performance and features.You’re now ready to use Nutrient Web SDK and reference
window.NutrientViewer
in the client-side code.
Download the framework here(opens in a new tab). The download will start immediately and will save a
.tar.gz
archive similar toPSPDFKit-Web-binary-1.0.0.tar.gz
on your computer.Once the download is complete, extract the archive and copy the entire contents of its
dist
folder to theweb/assets
directory or any other folder of your choice inside the web subfolder.Make sure your
assets
folder contains thenutrient-viewer.js
file and anutrient-viewer-lib
directory with library assets.Include the Nutrient library in your
index.html
file:<script src="assets/nutrient-viewer.js"></script>Make sure your server has the
Content-Type: application/wasm MIME
type set. For more information, refer to our guide on troubleshooting.
Rendering a PDF
Create a
PDFs
directory inassets
. Rename the PDF document you want to display in your application todocument.pdf
, and place it in thePDFs
directory. You can use this demo document as an example.Specify the
assets
directory inpubspec.yaml
:# The following section is specific to Flutter.flutter:+ assets:+ - PDFs/...Import the
PSPDFKit
package:import 'package:pspdfkit_flutter/pspdfkit_flutter.dart';Display a PDF document inside your Flutter app:
Scaffold(body: PspdfkitWidget(documentPath: 'file:///path/to/Document.pdf',),);Run the app:
Terminal window flutter run
Troubleshooting
Visit our troubleshooting guide for solutions to common errors.