pdfrx is a PDF viewer implementation built on the top of pdfium. The plugin currently supports Android, iOS, Windows, macOS, Linux, and Web.
Please note that "Web" is not shown in pub.dev's platform list, but IT DOES SUPPORT Web.
- A demo site using Flutter Web
The following fragment illustrates the easiest way to show a PDF file in assets:
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Pdfrx example'),
),
body: PdfViewer.asset('assets/hello.pdf'),
),
);
}
}Add this to your package's pubspec.yaml file and execute flutter pub get:
dependencies:
pdfrx: ^0.4.13-
Ensure your Windows installation enables Developer Mode
The build process internally uses symblic link and it requires Developer Mode to be enabled. Without this, you may encounter errors like this.
For Web, you should add the following <script> block to your index.html just before <script src="main.dart.js"... </script> to load PDF.js:
<!-- IMPORTANT: load pdfjs files -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.min.js"
type="text/javascript"
></script>
<script type="text/javascript">
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.js";
pdfRenderOptions = {
// where cmaps are downloaded from
cMapUrl: "https://cdn.jsdelivr.net/npm/[email protected]/cmaps/",
// The cmaps are compressed in the case
cMapPacked: true,
// any other options for pdfjsLib.getDocument.
// params: {}
};
</script>Please check example's code for the actual usage.
Please note that; with pdf.js 4.0 series, they changed the way to load pdfjsLib, it does not simply work with the current code. We need further investigation to support them.
For macOS, Flutter app restrict its capability by enabling App Sandbox by default. You can change the behavior by editing your app's entitlements files depending on your configuration. See the discussion below.
The easiest option to access files on your disk, set com.apple.security.app-sandbox to false on your entitlements file though it is not recommended for releasing apps because it completely disables App Sandbox.
Another option is to use com.apple.security.files.user-selected.read-only along with file_selector_macos. The option is better in security than the previous option.
Anyway, the example code for the plugin illustrates how to download and preview internet hosted PDF file. It uses
com.apple.security.network.client along with flutter_cache_manager:
<dict>
<key>com.apple.security.app-sandbox</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>
</dict>You can customize the behaviour and visual by configuring PdfViewerParams.
By default, the pages are layed out vertically. You can customize the layout logic by PdfViewerParams.layoutPages:
layoutPages: (pages, params) {
final height =
pages.fold(0.0, (prev, page) => max(prev, page.height)) +
params.margin * 2;
final pageLayouts = <Rect>[];
double x = params.margin;
for (var page in pages) {
pageLayouts.add(
Rect.fromLTWH(
x,
(height - page.height) / 2, // center vertically
page.width,
page.height,
),
);
x += page.width + params.margin;
}
return PdfPageLayout(
pageLayouts: pageLayouts,
documentSize: Size(x, height),
);
},By default, the viewer does never show any scroll bars nor scroll thumbs. You can add scroll thumbs by using PdfViewerParams.viewerOverlayBuilder:
viewerOverlayBuilder: (context, size) => [
// Add vertical scroll thumb on viewer's right side
PdfViewerScrollThumb(
controller: controller,
orientation: ScrollbarOrientation.right,
thumbSize: const Size(40, 25),
thumbBuilder:
(context, thumbSize, pageNumber, controller) =>
Container(
color: Colors.black,
// Show page number on the thumb
child: Center(
child: Text(
pageNumber.toString(),
style: const TextStyle(color: Colors.white),
),
),
),
),
// Add horizontal scroll thumb on viewer's bottom
PdfViewerScrollThumb(
controller: controller,
orientation: ScrollbarOrientation.bottom,
thumbSize: const Size(80, 30),
thumbBuilder:
(context, thumbSize, pageNumber, controller) =>
Container(
color: Colors.red,
),
),
],If you want to add page number on each page, you can do that by PdfViewerParams.pageOverlayBuilder:
pageOverlayBuilder: (context, pageRect, page) {
return Align(
alignment: Alignment.bottomCenter,
child: Text(page.pageNumber.toString(),
style: const TextStyle(color: Colors.red)));
},
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent