Flutter文件预览插件power_file_view的使用

Flutter文件预览插件power_file_view的使用

插件介绍

PowerFileView 是一个本地文件预览插件，支持预览 .doc, .docx, .ppt, .pptx, .xls, .xlsx, .pdf 等多种文件格式。它在 Android 上使用腾讯 TBS 服务，在 iOS 上使用 WKWebView。

支持的文件格式

整合步骤

1. 添加依赖

在 pubspec.yaml 文件中添加以下依赖：

power_file_view: ^1.0.0

2. 快速集成

Android

• 需要添加网络权限和存储权限。
• 在 AndroidManifest.xml 中添加以下权限：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

• 防止发布版本加载不到 TBS 内核库，需要在混淆文件 proguard-rules.pro 中添加以下代码：

-dontwarn dalvik.*
-dontwarn com.tencent.smtt.*

-keep class com.tencent.smtt.** {
    *;
}

-keep class com.tencent.tbs.** {
    *;
}

• 在 build.gradle 中配置删除无用资源：

buildTypes {
    release {
        shrinkResources false
        minifyEnabled false
        zipAlignEnabled true
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
}

iOS

• 使用 WKWebView 预览文件，所有支持的文件格式都可以通过 WKWebView 预览。

示例代码

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:power_file_view/power_file_view.dart';
import 'package:power_file_view_example/power_file_view_page.dart';

import 'permission_util.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  PowerFileViewManager.initLogEnable(true, true);
  PowerFileViewManager.initEngine();
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

const List<String> files = [
  "https://google-developer-training.github.io/android-developer-fundamentals-course-concepts/en/android-developer-fundamentals-course-concepts-en.pdf",
  "http://www.cztouch.com/upfiles/soft/testpdf.pdf",
  "http://blog.java1234.com/cizhi20211008.docx",
  "http://blog.java1234.com/moban20211008.xls"
];

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('文件列表'),
      ),
      body: ListView.builder(
          itemCount: files.length,
          itemBuilder: (context, index) {
            String filePath = files[index];
            final fileName = FileUtil.getFileName(filePath);
            final fileType = FileUtil.getFileType(filePath);
            return Container(
              margin: const EdgeInsets.only(top: 10.0),
              padding: const EdgeInsets.symmetric(horizontal: 15.0),
              child: ElevatedButton(
                onPressed: () async {
                  String savePath = await getFilePath(fileType, fileName);
                  onTap(context, filePath, savePath);
                },
                child: Text(fileName),
              ),
            );
          }),
    );
  }

  Future onTap(BuildContext context, String downloadUrl, String downloadPath) async {
    bool isGranted = await PermissionUtil.check();
    if (isGranted) {
      Navigator.of(context).push(
        MaterialPageRoute(builder: (ctx) {
          return PowerFileViewPage(
            downloadUrl: downloadUrl,
            downloadPath: downloadPath,
          );
        }),
      );
    } else {
      debugPrint('no permission');
    }
  }

  Future getFilePath(String type, String assetPath) async {
    final _directory = await getTemporaryDirectory();
    return "${_directory.path}/fileview/${base66.encode(utf8.encode(assetPath))}.$type";
  }
}

使用说明

文件预览

• 网络文件: 传递要预览文件的下载 URL 和存储路径。
• 本地文件: 传递文件的本地路径。

class PowerFileViewPage extends StatefulWidget {
  final String downloadUrl;
  final String downloadPath;

  const PowerFileViewPage({Key? key, required this.downloadUrl, required this.downloadPath}) : super(key: key);

  @override
  State<PowerFileViewPage> createState() => _PowerFileViewPageState();
}

class _PowerFileViewPageState extends State<PowerFileViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('File Preview'),
      ),
      body: PowerFileViewWidget(
        downloadUrl: widget.downloadUrl,
        filePath: widget.downloadPath,
      ),
    );
  }
}

自定义进度显示和 错误显示

可以自定义加载进度和错误显示的样式。

PowerFileViewWidget(
  downloadUrl: widget.downloadUrl,
  filePath: widget.downloadPath,
  loadingBuilder: ( viewType, progress) {
    return Container(
      color: Colors.grey,
      alignment: Alignment.center,
      child: Text("Loading: $progress"),
    );
  },
  errorBuilder: ( viewType) {
    return Container(
      color: Colors.red,
      alignment: Alignment.center,
      child: const Text("Something went wrong!!!!"),
    );
  },
),

HTTP 配置（可选）

如果需要使用明文下载，需要进行以下配置：

Android

• 创建 network_config.xml 文件并配置在 AndroidManifest.xml 中。

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true"/>
</network-security-config>

iOS

• 在 Info.plist 中添加以下键值对。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>