Flutter文档查看插件document_viewer的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter文档查看插件document_viewer的使用

Introduction

document_viewer 是一个用于在 Android 平台上查看多种文档格式的 Flutter 插件。需要注意的是，这个插件目前还处于开发阶段，因此不建议在生产环境中使用。

Supported Platforms

  • Android

Support File Type

  • Android: docx, doc, pdf, txt, jpg, jpeg, png

Features

  • 查看 PDF 文件
  • 查看图片 (jpg, jpeg, png)
  • 查看文本文件
  • 查看 DOCX 文件
  • 查看 DOC 文件

Example

以下是一个简单的示例代码，演示如何使用 document_viewer 插件来查看 PDF 文件：

示例代码

import 'dart:async';
import 'dart:io';
import 'dart:typed_data';

import 'package:document_viewer/document_viewer.dart';
import 'package:external_path/external_path.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:permission_handler/permission_handler.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? pdfFilePath;

  // 监听存储权限
  listenForPermission() async {
    var status = await Permission.storage.status;
    if (!status.isGranted) {
      await Permission.storage.request();
    }
  }

  // 下载并保存PDF文件
  Future<String> downloadAndSavePdf() async {
    await Permission.manageExternalStorage.request();
    final directory = await getApplicationDocumentsDirectory();
    var path = await ExternalPath.getExternalStoragePublicDirectory(
        ExternalPath.DIRECTORY_DOWNLOADS);
    final file = File('${directory.path}/sample.pdf');
    String localFilePath = '$path/sample.pdf';
    File localFile = File(localFilePath);
    Uint8List bytes = localFile.readAsBytesSync();
    file.writeAsBytesSync(bytes!);
    return localFilePath;
  }

  // 加载PDF文件
  void loadPdf() async {
    pdfFilePath = await downloadAndSavePdf();
    setState(() {});
  }

  @override
  void initState() {
    listenForPermission();
    loadPdf();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(builder: (context) {
        return Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            title: const Text('Document Viewer'),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                if (pdfFilePath != null)
                  Expanded(
                    child: Container(
                      color: Colors.white,
                      child: DocumentViewer(filePath: pdfFilePath!),
                    ),
                  )
                else
                  Text("Pdf is not Loaded"),
              ],
            ),
          ),
        );
      }),
    );
  }
}

License

该项目采用 MIT License。

Future Plans

  • 支持查看 Excel 文件。
  • 支持查看 PPT 文件。

Issues and Feedback

如果您有任何关于添加功能的建议或发现某些功能无法正常工作，请随时在 Github Issue 中提出问题或提交 Pull Request，欢迎贡献！

Contributor


更多关于Flutter文档查看插件document_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter文档查看插件document_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用document_viewer插件的一个示例代码案例。document_viewer插件允许你在Flutter应用中查看各种文档，如PDF、Word、Excel等。

首先，你需要在你的pubspec.yaml文件中添加document_viewer依赖：

dependencies:
  flutter:
    sdk: flutter
  document_viewer: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中使用DocumentViewer小部件来显示文档。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:document_viewer/document_viewer.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Document Viewer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Document Viewer Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 这里替换为你的文档URL
            String documentUrl = 'https://example.com/path/to/your/document.pdf';

            if (await canLaunch(documentUrl)) {
              // 使用系统默认的文档查看器打开文档
              await launch(documentUrl);
            } else {
              throw 'Could not launch $documentUrl';
            }
          },
          child: Text('Open Document'),
        ),
      ),
    );
  }
}

注意：上面的代码示例实际上并没有直接使用document_viewer插件提供的所有功能，因为document_viewer插件主要用于在Flutter应用中内嵌查看文档，而上面的代码使用了url_launcher插件来打开系统默认的文档查看器。这是因为document_viewer插件可能依赖于平台特定的实现，并且对于不同的文档类型，可能需要不同的处理方式。

然而，如果你希望在内嵌的WebView中查看PDF文档（假设document_viewer插件支持此功能，具体请查阅插件的官方文档），你可能需要使用webview_flutter插件或其他类似的插件，并结合document_viewer提供的任何特定API（如果存在的话）。但请注意，document_viewer插件的API和用法可能会随着版本更新而变化，因此建议查阅最新的官方文档和示例代码。

由于document_viewer插件的具体用法可能因版本而异，且直接的内嵌文档查看功能可能需要更复杂的实现，这里无法给出确切的内嵌查看代码。但上面的代码提供了一个基本的启动点，展示了如何在Flutter应用中打开文档。如果你需要更高级的功能，请查阅document_viewer插件的官方文档和示例代码。

回到顶部