Flutter应用中如何实现PDF内嵌链接可点击并跳转外部浏览器？

PDFx包默认不会处理PDF内嵌链接的交互逻辑，需要手动实现链接提取与点击跳转功能，具体步骤如下：

1. 提取PDF中的所有链接 #

通过PDFx的PdfDocument实例遍历页面，提取每个页面的链接信息：

import 'package:pdfx/pdfx.dart';

Future<List<PdfLink>> extractPdfLinks(String pdfPath) async {
  final pdfDocument = await PdfDocument.openFile(pdfPath);
  final List<PdfLink> allLinks = [];

  for (int pageNumber = 1; pageNumber <= pdfDocument.pagesCount; pageNumber++) {
    final page = await pdfDocument.getPage(pageNumber);
    final links = await page.getLinks();
    allLinks.addAll(links);
    await page.close();
  }

  await pdfDocument.close();
  return allLinks;
}

2. 在PDF视图上叠加可点击链接区域 #

使用Stack组件将PdfView与对应链接位置的GestureDetector叠加，同时完成PDF坐标到Flutter布局坐标的转换：

import 'package:flutter/material.dart';
import 'package:pdfx/pdfx.dart';
import 'package:url_launcher/url_launcher.dart';

class PdfWithClickableLinks extends StatefulWidget {
  final String pdfPath;

  const PdfWithClickableLinks({super.key, required this.pdfPath});

  @override
  State<PdfWithClickableLinks> createState() => _PdfWithClickableLinksState();
}

class _PdfWithClickableLinksState extends State<PdfWithClickableLinks> {
  late Future<List<PdfLink>> _linksFuture;
  PdfController? _pdfController;

  @override
  void initState() {
    super.initState();
    _pdfController = PdfController(document: PdfDocument.openFile(widget.pdfPath));
    _linksFuture = extractPdfLinks(widget.pdfPath);
  }

  @override
  void dispose() {
    _pdfController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        PdfView(
          controller: _pdfController!,
          onPageChanged: (page) => setState(() {}),
        ),
        FutureBuilder<List<PdfLink>>(
          future: _linksFuture,
          builder: (context, snapshot) {
            if (!snapshot.hasData) return const SizedBox.shrink();

            final currentPage = _pdfController?.currentPage ?? 1;
            final pageLinks = snapshot.data!
                .where((link) => link.pageNumber == currentPage)
                .toList();

            return LayoutBuilder(
              builder: (context, constraints) {
                return Stack(
                  children: pageLinks.map((link) {
                    final rect = Rect.fromLTRB(
                      link.rect.left * constraints.maxWidth,
                      link.rect.top * constraints.maxHeight,
                      link.rect.right * constraints.maxWidth,
                      link.rect.bottom * constraints.maxHeight,
                    );

                    return Positioned.fromRect(
                      rect: rect,
                      child: GestureDetector(
                        onTap: () async {
                          final uri = Uri.parse(link.url);
                          if (await canLaunchUrl(uri)) {
                            await launchUrl(uri, mode: LaunchMode.externalApplication);
                          }
                        },
                        child: Container(color: Colors.transparent),
                      ),
                    );
                  }).toList(),
                );
              },
            );
          },
        ),
      ],
    );
  }
}

3. 添加必要依赖 #

在pubspec.yaml中补充依赖包：

dependencies:
  pdfx: ^2.5.0 # 使用最新稳定版本
  url_launcher: ^6.2.0 # 用于唤起外部浏览器

注意事项 #

• 坐标转换逻辑基于PDFView占满父容器的前提，若有自定义缩放或内边距，需调整坐标计算规则。
• 部分结构特殊的PDF可能存在链接提取不完全的情况，取决于PDF本身的编码和PDFx的解析能力。

内容的提问来源于stack exchange，提问作者Dev Loots