Flutter PowerFileView

一个本地文件预览插件，使用PowerFileView，您可以像Android和iOS一样轻松预览doc、docx、ppt、pptx、xls、xlsx、pdf等文件。

说明

  • Android使用腾讯TBS服务，支持doc、docx、ppt、pptx、xls、xlsx、pdf、txt、epub文件的预览
  • iOS使用WKWebView，WKWebView支持的都可以预览

支持的格式

格式 android ios
.doc ✅ ✅
.docx ✅ ✅
.ppt ✅ ✅
.pptx ✅ ✅
.xls ✅ ✅
.xlsx ✅ ✅
.pdf ✅ ✅

集成

1. 依赖

添加到 pubspec.yaml 文件下

power_file_view: ^1.0.0

2. 快速集成

1. Android

由于Android使用TBS服务，需要网络权限和存储权限。在Android的AndroidManifest文件中添加以下权限。

    <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.** {
    *;
}

然后enable delete useless resources in build.gradle，配置如图所示

buildTypes {
        release {
            //Close delete useless resources
            shrinkResources false
            //Close delete useless code
            minifyEnabled false
            zipAlignEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

2. TBS初始化

由于Android使用TBS服务，使用前需要初始化，耗时约3-30秒。

  1. 异步初始化（推荐）

可以在app的main.dart文件的main函数下进行异步初始化，这样用户在打开文件时就不需要等待TBS初始化了。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  PowerFileViewManager.initEngine();
  runApp(const MyApp());
}
  1. 打开时初始化

如果未进行异步初始化配置，会在文件打开前自动进行初始化操作，用户无需配置

4. 快速使用

文件预览

  1. 网络文件：只需传入要预览文件的downloadUrl和文件下载存储路径的downloadPath。
定义downloadPath

  import 'package:path_provider/path_provider.dart';
  ...
  final _directory = await getTemporaryDirectory();
  final downloadPath = "${_directory.path}/fileview/"fileName.pdf";//Set a name you like
  1. 本地文件：只需传入本地文件所在路径的downloadPath。

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,
      ),
    );
  }
}

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

您可以在loadingBuilder和errorBuilder中自定义加载进度和错误的显示样式。

 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!!!!"),
          );
        },
      ),

5. HTTP配置（可选）

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

1. android

在 android/app/src/main/res/xml/ 下创建一个新的 network_config.xml

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

并在 android/app/src/main/AndroidManifest.xml 中配置

<application
       android:networkSecurityConfig="@xml/network_config">

2. iOS

确保在 ios/Runner/Info.plist 中添加以下键

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

GitHub

查看 Github