Flutter PDF阅读插件easy_pdf_viewer的使用
Flutter PDF阅读插件easy_pdf_viewer的使用
easy_pdf_viewer简介
easy_pdf_viewer
是一个用于处理PDF文件的Flutter插件,适用于Android和iOS平台。该插件最初是基于https://github.com/lohanidamodar/pdf_viewer进行改进的。
安装
在您的项目中安装easy_pdf_viewer
插件非常简单:
> flutter pub add easy_pdf_viewer
Android
无需特殊权限,插件会使用应用程序缓存目录。
iOS
同样不需要额外的权限。
使用方法
加载PDF
您可以从资源、URL或文件加载PDF文档。
从资源加载
PDFDocument doc = await PDFDocument.fromAsset('assets/test.pdf');
从URL加载
PDFDocument doc = await PDFDocument.fromURL('https://www.ecma-international.org/wp-content/uploads/ECMA-262_12th_edition_june_2021.pdf');
从文件加载
File file = File('...');
PDFDocument doc = await PDFDocument.fromFile(file);
加载指定页面
如果您需要加载特定页数的PDF页面,可以这样做:
PDFPage pageOne = await doc.get(page: _number);
使用预构建的PDF查看器
为了方便起见,插件提供了一个预构建的PDF查看器组件,可以直接使用。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Example'),
),
body: Center(
child: _isLoading
? Center(child: CircularProgressIndicator())
: PDFViewer(document: document),
),
);
}
示例代码
下面是一个完整的示例,展示了如何在Flutter应用中使用easy_pdf_viewer
插件来加载并显示PDF文档。
import 'package:flutter/material.dart';
import 'package:easy_pdf_viewer/easy_pdf_viewer.dart';
void main() => runApp(App());
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyApp(),
);
}
}
class MyApp extends StatefulWidget {
const MyApp({this.progressExample = false});
final bool progressExample;
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool _isLoading = true;
late PDFDocument document;
@override
void initState() {
super.initState();
loadDocument();
}
loadDocument() async {
document = await PDFDocument.fromAsset('assets/sample.pdf');
setState(() => _isLoading = false);
}
changePDF(value) async {
setState(() => _isLoading = true);
if (value == 1) {
document = await PDFDocument.fromAsset('assets/sample2.pdf');
} else if (value == 2) {
document = await PDFDocument.fromURL(
"https://www.africau.edu/images/default/sample.pdf",
/* cacheManager: CacheManager(
Config(
"customCacheKey",
stalePeriod: const Duration(days: 2),
maxNrOfCacheObjects: 10,
),
), */
);
} else {
document = await PDFDocument.fromAsset('assets/sample.pdf');
}
setState(() => _isLoading = false);
}
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(
child: Column(
children: <Widget>[
SizedBox(height: 36),
ListTile(
title: Text('Load from Assets'),
onTap: () {
changePDF(1);
},
),
ListTile(
title: Text('Load from URL'),
onTap: () {
changePDF(2);
},
),
ListTile(
title: Text('Restore default'),
onTap: () {
changePDF(3);
},
),
ListTile(
title: Text('With Progress'),
onTap: () {
// Navigate to another page with progress bar
},
),
],
),
),
appBar: AppBar(
title: const Text('PDFViewer'),
),
body: Center(
child: _isLoading
? Center(child: CircularProgressIndicator())
: PDFViewer(
document: document,
lazyLoad: false,
zoomSteps: 1,
numberPickerConfirmWidget: const Text(
"Confirm",
),
//uncomment below line to preload all pages
// lazyLoad: false,
// uncomment below line to scroll vertically
// scrollDirection: Axis.vertical,
//uncomment below code to replace bottom navigation with your own
/* navigationBuilder:
(context, page, totalPages, jumpToPage, animateToPage) {
return ButtonBar(
alignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.first_page),
onPressed: () {
jumpToPage()(page: 0);
},
),
IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
animateToPage(page: page - 2);
},
),
IconButton(
icon: Icon(Icons.arrow_forward),
onPressed: () {
animateToPage(page: page);
},
),
IconButton(
icon: Icon(Icons.last_page),
onPressed: () {
jumpToPage(page: totalPages - 1);
},
),
],
);
}, */
),
),
);
}
}
通过以上内容,您应该能够快速上手并使用easy_pdf_viewer
插件在Flutter应用程序中实现PDF文档的加载与查看功能。如果有任何问题或进一步的需求,请随时查阅官方文档或寻求社区的帮助。
更多关于Flutter PDF阅读插件easy_pdf_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter PDF阅读插件easy_pdf_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中集成和使用easy_pdf_viewer
插件来查看PDF文件的示例代码。
1. 添加依赖
首先,你需要在你的pubspec.yaml
文件中添加easy_pdf_viewer
依赖:
dependencies:
flutter:
sdk: flutter
easy_pdf_viewer: ^x.x.x # 请替换为最新版本号
然后运行flutter pub get
来安装依赖。
2. 导入插件
在你的Dart文件中导入easy_pdf_viewer
:
import 'package:easy_pdf_viewer/easy_pdf_viewer.dart';
3. 使用PDFViewer
下面是一个完整的示例,展示如何在Flutter应用中显示PDF文件:
import 'package:flutter/material.dart';
import 'package:easy_pdf_viewer/easy_pdf_viewer.dart';
import 'package:path_provider/path_provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter PDF Viewer Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: PDFViewerScreen(),
);
}
}
class PDFViewerScreen extends StatefulWidget {
@override
_PDFViewerScreenState createState() => _PDFViewerScreenState();
}
class _PDFViewerScreenState extends State<PDFViewerScreen> {
late String pdfPath;
@override
void initState() {
super.initState();
_loadPdfFromAssets();
}
Future<void> _loadPdfFromAssets() async {
// 从assets文件夹中加载PDF文件(假设你的PDF文件名为sample.pdf)
// 注意:需要在pubspec.yaml中声明assets
// flutter:
// assets:
// - assets/sample.pdf
final ByteData data = await rootBundle.load('assets/sample.pdf');
final Directory tempDir = await getTemporaryDirectory();
final File tempFile = File('${tempDir.path}/sample.pdf');
await tempFile.writeAsBytes(data.buffer.asUint8List());
setState(() {
pdfPath = tempFile.path;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('PDF Viewer Demo'),
),
body: pdfPath.isEmpty
? Center(child: CircularProgressIndicator())
: PDFViewerScaffold(
appBar: AppBar(
title: Text('Sample PDF'),
),
path: pdfPath,
),
);
}
}
4. 在pubspec.yaml
中声明assets
确保在pubspec.yaml
中声明你要加载的PDF文件:
flutter:
assets:
- assets/sample.pdf
5. 运行应用
现在你可以运行你的Flutter应用,应该会看到一个简单的PDF阅读器界面,其中显示了你从assets文件夹中加载的PDF文件。
这个示例展示了如何从应用的assets中加载PDF文件并在easy_pdf_viewer
中显示它。根据你的需求,你也可以从网络或本地存储加载PDF文件。easy_pdf_viewer
插件提供了灵活的方式来显示PDF文件,你可以查阅其官方文档以了解更多高级用法。