使用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
相关产品推荐
相关产品推荐

