Flutter Web：如何在Widget容器内显示PDF文件

嘿，我刚好搞定过类似的需求！要在Flutter Web的Widget容器里展示PDF，而不是跳转到新标签页，有几个实用的方案，我给你拆解清楚：

这是Flutter Web原生支持的方法，不需要额外装包，核心就是把网页的iframe包装成Flutter Widget，直接嵌入到你的布局里。

具体步骤：

1. 先写一个自定义的PDF展示Widget：

import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'dart:html' as html; // 别忘了引入html库

class EmbeddedPdfViewer extends StatelessWidget {
  final String pdfUrl;

  const EmbeddedPdfViewer({super.key, required this.pdfUrl});

  @override
  Widget build(BuildContext context) {
    // 生成唯一的视图ID，避免重复注册
    final viewId = 'pdf-embed-${UniqueKey().hashCode}';
    
    // 注册iframe视图
    ui.platformViewRegistry.registerViewFactory(
      viewId,
      (int id) => html.IFrameElement()
        ..src = pdfUrl
        ..style.border = 'none' // 去掉边框
        ..style.width = '100%'
        ..style.height = '100%',
    );

    return HtmlElementView(
      viewType: viewId,
    );
  }
}

2. 在你的页面里直接使用这个Widget就行：

Scaffold(
  body: Container(
    margin: const EdgeInsets.all(16),
    height: MediaQuery.of(context).size.height * 0.8, // 自定义高度
    child: const EmbeddedPdfViewer(pdfUrl: 'http://xxxx.pdf'),
  ),
);

注意：如果你的PDF链接是跨域的，得确保目标服务器配置了CORS，允许你的Flutter Web域名访问，不然iframe会加载失败哦。

如果需要更多功能，比如PDF缩放、前进后退、监听加载状态，官方的webview插件是更好的选择，web端的支持很稳定。

操作步骤：

1. 先在pubspec.yaml里添加依赖：

dependencies:
  webview_flutter: ^4.4.0
  webview_flutter_web: ^0.2.2

2. 然后写一个WebView版的PDF视图：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_web/webview_flutter_web.dart';

class PdfWebViewViewer extends StatelessWidget {
  final String pdfUrl;

  const PdfWebViewViewer({super.key, required this.pdfUrl});

  @override
  Widget build(BuildContext context) {
    // 指定web端的WebView实现
    WebView.platform = WebWebViewPlatform();
    
    return WebView(
      initialUrl: pdfUrl,
      javascriptMode: JavascriptMode.unrestricted, // 启用JS，确保PDF正常渲染
      gestureNavigationEnabled: true, // 允许手势导航
      onPageStarted: (url) {
        // 可以在这里显示加载动画
        print('PDF开始加载');
      },
      onPageFinished: (url) {
        // 加载完成后隐藏动画
        print('PDF加载完成');
      },
    );
  }
}

这个方案的优势是能利用WebView的各种回调和配置，比如拦截请求、添加自定义菜单等，适合需要交互的场景。

如果想要更“原生”的Flutter体验（完全脱离web的iframe/webview），可以试试pdf库配合flutter_pdfview的web适配，但这个方案相对复杂，需要处理PDF的本地解析和渲染，适合需要离线查看或者高度自定义样式的场景。不过目前web端的兼容性不如移动端，建议先做充分测试。

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