如何在Java/Kotlin/Flutter的PDFViewer中实现PDF文本搜索与跳转

核心实现思路 #

通过维护当前搜索结果的索引，结合组件自带的jumpToSearchResult方法，实现上下跳转功能。同时直接使用SfPdfViewer.network加载在线PDF，无需提前下载。

代码实现步骤 #

1. 初始化核心变量

import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
import 'package:flutter/material.dart';

class PDFSearchPage extends StatefulWidget {
  const PDFSearchPage({super.key});

  @override
  State<PDFSearchPage> createState() => _PDFSearchPageState();
}

class _PDFSearchPageState extends State<PDFSearchPage> {
  final PdfViewerController _pdfViewerController = PdfViewerController();
  List<PdfSearchResult> _searchResults = [];
  int _currentSearchIndex = -1;
  final TextEditingController _searchController = TextEditingController();

2. 加载在线PDF

直接通过URL加载，无需额外下载逻辑：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: TextField(
        controller: _searchController,
        decoration: const InputDecoration(
          hintText: '输入搜索关键词',
          border: InputBorder.none,
        ),
        onSubmitted: _performSearch,
      ),
      actions: [
        IconButton(
          icon: const Icon(Icons.clear),
          onPressed: () {
            _searchController.clear();
            _clearSearch();
          },
        )
      ],
    ),
    body: SfPdfViewer.network(
      'https://example.com/your-document.pdf', // 替换为目标PDF URL
      controller: _pdfViewerController,
    ),
    bottomNavigationBar: _buildNavigationBar(),
  );
}

3. 实现搜索逻辑

void _performSearch(String keyword) async {
  if (keyword.isEmpty) {
    _clearSearch();
    return;
  }
  // 执行搜索并获取结果
  _searchResults = await _pdfViewerController.searchText(keyword);
  // 重置当前索引到第一个结果
  _currentSearchIndex = _searchResults.isNotEmpty ? 0 : -1;
  if (_currentSearchIndex != -1) {
    _pdfViewerController.jumpToSearchResult(_searchResults[_currentSearchIndex]);
  }
  setState(() {});
}

void _clearSearch() {
  _searchResults.clear();
  _currentSearchIndex = -1;
  _pdfViewerController.clearSearch();
  setState(() {});
}

4. 上下跳转功能实现

void _jumpToPreviousResult() {
  if (_searchResults.isEmpty) return;
  // 循环跳转：第一个结果往上跳回到最后一个
  _currentSearchIndex = (_currentSearchIndex - 1 + _searchResults.length) % _searchResults.length;
  _pdfViewerController.jumpToSearchResult(_searchResults[_currentSearchIndex]);
  setState(() {});
}

void _jumpToNextResult() {
  if (_searchResults.isEmpty) return;
  // 循环跳转：最后一个结果往下跳回到第一个
  _currentSearchIndex = (_currentSearchIndex + 1) % _searchResults.length;
  _pdfViewerController.jumpToSearchResult(_searchResults[_currentSearchIndex]);
  setState(() {});
}

5. 构建跳转按钮栏

Widget _buildNavigationBar() {
  return BottomAppBar(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        IconButton(
          icon: const Icon(Icons.arrow_upward),
          onPressed: _searchResults.isNotEmpty ? _jumpToPreviousResult : null,
          disabledColor: Colors.grey,
        ),
        Text(
          _searchResults.isNotEmpty 
              ? '${_currentSearchIndex + 1}/${_searchResults.length}' 
              : '',
          style: const TextStyle(fontSize: 16),
        ),
        IconButton(
          icon: const Icon(Icons.arrow_downward),
          onPressed: _searchResults.isNotEmpty ? _jumpToNextResult : null,
          disabledColor: Colors.grey,
        ),
      ],
    ),
  );
}

关键注意事项 #

• 确保使用最新版本的syncfusion_flutter_pdfviewer，避免旧版本的API兼容问题
• 跳转时必须通过_currentSearchIndex跟踪当前位置，每次跳转后更新索引并调用jumpToSearchResult
• 取模运算用于实现搜索结果的循环跳转，提升用户体验

内容的提问来源于stack exchange，提问作者Vinay Ambapkar