Flutter文件预览插件file_preview的使用

Flutter文件预览插件file_preview的使用

简介

file_preview 是一个用于在Flutter应用中预览多种文件格式的插件，支持在Android和iOS平台上预览常见的文档格式，如doc、docx、rtf、ppt、pptx、xls、xlsx、xlsm、csv、pdf、txt、epub、chm等。该插件在Android上使用腾讯TBS服务，在iOS上使用WKWebView进行文件预览。

支持的文件格式

集成步骤

1. pubspec.yaml

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

dependencies:
  file_preview: ^latest

2. 引入插件

在Dart文件中引入file_preview：

import 'package:file_preview/file_preview.dart';

3. TBS初始化

由于Android平台使用TBS服务，因此必须在使用FilePreviewWidget之前完成TBS的初始化：

await FilePreview.initTBS(license: "your license");

4. 获取TBS版本

可以通过以下代码获取当前TBS的版本号：

String version = await FilePreview.tbsVersion();

5. 预览文件

在预览文件之前，建议先检查TBS是否已经初始化成功：

var isInit = await FilePreview.tbsHasInit();
if (!isInit) {
  await FilePreview.initTBS();
  return;
}

创建文件控制器并调用showFile方法来预览文件：

// 文件控制器
FilePreviewController controller = FilePreviewController();

// 切换文件
controller.showFile(path);

// 文件预览widget
FilePreviewWidget(
  controller: controller,
  width: 400,
  height: 600,
  path: widget.path,
  callBack: FilePreviewCallBack(
    onShow: () {
      print("文件打开成功");
    },
    onDownload: (progress) {
      print("文件下载进度$progress");
    },
    onFail: (code, msg) {
      print("文件打开失败 $code  $msg");
    },
  ),
),

6. 删除本地缓存

Android平台在预览在线文件时会将文件下载到本地缓存目录下，可以通过以下方法删除缓存：

await FilePreview.deleteCache();

7. HTTP配置

高版本的Android和iOS默认禁用HTTP请求，可以设置允许HTTP请求以防止文件加载失败。

• 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">

• iOS：在ios/Runner/Info.plist中添加以下配置：

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

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用file_preview插件：

import 'dart:io';
import 'dart:typed_data';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:file_preview/file_preview.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isInit = false;
  String? version;

  [@override](/user/override)
  void initState() {
    _initTBS();
    super.initState();
  }

  void _initTBS() async {
    // 初始化TBS服务
    isInit = await FilePreview.initTBS(license: "your license");
    version = await FilePreview.tbsVersion();
    if (mounted) {
      setState(() {});
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('File Preview'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('TBS初始化 $isInit'),
            Text('TBS版本号 $version'),
            MaterialButton(
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('检测TBS是否初始化成功'),
              onPressed: () async {
                isInit = await FilePreview.tbsHasInit();
                setState(() {});
              },
            ),
            MaterialButton(
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('在线预览'),
              onPressed: () async {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (_) {
                      return FilePreviewPage(
                        title: "docx预览",
                        path: "https://gstory.vercel.app/ceshi/ceshi.docx",
                      );
                    },
                  ),
                );
              },
            ),
            MaterialButton(
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('本地文件预览'),
              onPressed: () async {
                FilePickerResult? result = await FilePicker.platform.pickFiles();
                if (result != null) {
                  File file = File(result.files.single.path!);
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) {
                        return FilePreviewPage(
                          title: "本地文件预览",
                          path: file.path,
                        );
                      },
                    ),
                  );
                }
              },
            ),
            MaterialButton(
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('清理本地缓存文件（android有效）'),
              onPressed: () async {
                var delete = await FilePreview.deleteCache();
                if (delete) {
                  print("缓存文件清理成功");
                }
              },
            ),
            MaterialButton(
              color: Colors.blue,
              textColor: Colors.white,
              child: const Text('在线视频(仅支持ios)'),
              onPressed: () async {
                if (Platform.isIOS) {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) {
                        return FilePreviewPage(
                          title: "在线视频(仅支持ios)",
                          path: "https://v.gsuus.com/play/xbo8Dkdg/index.m3u8",
                        );
                      },
                    ),
                  );
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

class FilePreviewPage extends StatelessWidget {
  final String title;
  final String path;

  const FilePreviewPage({Key? key, required this.title, required this.path}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: FilePreviewWidget(
          controller: FilePreviewController(),
          width: 400,
          height: 600,
          path: path,
          callBack: FilePreviewCallBack(
            onShow: () {
              print("文件打开成功");
            },
            onDownload: (progress) {
              print("文件下载进度$progress");
            },
            onFail: (code, msg) {
              print("文件打开失败 $code  $msg");
            },
          ),
        ),
      ),
    );
  }
}