You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用SfPdfViewer.asset()在Chrome中无法显示PDF问题排查

问题排查与解决方案

1. 移除SingleChildScrollView嵌套

SfPdfViewer组件本身内置了滚动处理逻辑,外层包裹SingleChildScrollView会导致Web端布局冲突,引发空白问题。直接将SfPdfViewer作为body的子组件即可:

修改后的代码:

Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("My PDF Document"),
      ),
      body: SfPdfViewer.asset('assets/patientForm.pdf'),
    ),
  );
}

2. 配置Web端必要的脚本支持

在Flutter Web项目的web/index.html文件的<head>标签内添加Syncfusion PDF Viewer的Web支持脚本:

<head>
  <!-- 保留原有内容 -->
  <script src="https://cdn.syncfusion.com/flutter/js/pdfviewer.js"></script>
</head>

3. 确认依赖与资源配置

  • 确保pubspec.yaml中syncfusion_flutter_pdfviewer为最新稳定版,执行以下命令更新:
flutter pub upgrade syncfusion_flutter_pdfviewer
  • 检查assets配置的缩进格式(YAML对缩进严格要求,需保证层级正确):
flutter:
  assets:
    - assets/patientForm.pdf

4. 清理缓存重新构建

执行以下命令清理缓存并重新运行项目:

flutter clean
flutter pub get
flutter run -d chrome

内容的提问来源于stack exchange,提问作者INeedHelp1234

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.03 20:00:04