Flutter文档查看插件easy_docs_viewer的使用

easy_docs_viewer 是一个用于在Flutter应用中轻松渲染在线PDF、PPTX、PPT等文档的插件。该插件基于 webview_flutter 和 docs.google.com 实现。

如何使用

Powerpoint (pptx 或 ppt)

以下是一个示例，展示如何使用 easy_docs_viewer 查看Powerpoint文件：

import 'package:easy_docs_viewer/lib/easy_docs_viewer.dart';
import 'package:flutter/material.dart';

class CustomPDFViewer extends StatelessWidget {
  const CustomPDFViewer({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      height: 150,
      width: 150,
      child: EasyDocsViewer(
        url: "https://scholar.harvard.edu/files/torman_personal/files/samplepptx.pptx",
      ),
    );
  }
}

PDF

以下是查看PDF文件的示例：

import 'package:easy_docs_viewer/lib/easy_docs_viewer.dart';
import 'package:flutter/material.dart';

class CustomPDFViewer extends StatelessWidget {
  const CustomPDFViewer({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      height: 150,
      width: 150,
      child: EasyDocsViewer(
        url: "https://www.tutorialspoint.com/flutter/flutter_tutorial.pdf",
      ),
    );
  }
}

其他类型的文件（仍在研究阶段）

如果你想打开其他类型的文件，可以尝试以下代码（注意：该功能仍处于研究阶段）：

import 'package:easy_docs_viewer/lib/easy_docs_viewer.dart';
import 'package:flutter/material.dart';

class CustomOtherFileViewer extends StatelessWidget {
  const CustomOtherFileViewer({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      height: 150,
      width: 150,
      child: EasyDocsViewer(
        url: "<AnyDocsToOpenLink>",
      ),
    );
  }
}

完整示例 Demo

以下是一个完整的Flutter应用程序示例，包含上述所有功能：

import 'package:flutter/material.dart';
import 'package:easy_docs_viewer/lib/easy_docs_viewer.dart';

void main() => runApp(MyApp());

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

class DocumentViewerHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Document Viewer'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            Expanded(
              child: CustomPDFViewer(),
            ),
            SizedBox(height: 20),
            Expanded(
              child: CustomPDFViewerForPDF(),
            ),
            SizedBox(height: 20),
            Expanded(
              child: CustomOtherFileViewer(),
            ),
          ],
        ),
      ),
    );
  }
}

// 查看Powerpoint文件
class CustomPDFViewer extends StatelessWidget {
  const CustomPDFViewer({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300,
      width: double.infinity,
      child: EasyDocsViewer(
        url: "https://scholar.harvard.edu/files/torman_personal/files/samplepptx.pptx",
      ),
    );
  }
}

// 查看PDF文件
class CustomPDFViewerForPDF extends StatelessWidget {
  const CustomPDFViewerForPDF({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300,
      width: double.infinity,
      child: EasyDocsViewer(
        url: "https://www.tutorialspoint.com/flutter/flutter_tutorial.pdf",
      ),
    );
  }
}

// 查看其他类型文件
class CustomOtherFileViewer extends StatelessWidget {
  const CustomOtherFileViewer({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300,
      width: double.infinity,
      child: EasyDocsViewer(
        url: "<AnyDocsToOpenLink>", // 替换为实际文件链接
      ),
    );
  }
}

注意事项

由于该插件仍处于开发阶段，更多详细文档将陆续发布。