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

Flutter Web中syncfusion_flutter_pdfviewer无法显示PDF的问题

解决Flutter Web中Syncfusion PDF Viewer无法显示PDF的问题

针对你遇到的Syncfusion Flutter PDF Viewer(26.1.39版本)在Web端无法渲染任何PDF的问题,按以下步骤逐一排查修复:

1. 必须配置Syncfusion许可密钥

Syncfusion非开源组件需要在代码中注册许可密钥,否则Web端会静默失败,无任何渲染反馈。在main.dart的初始化代码中添加:

import 'package:syncfusion_flutter_core/core.dart';

void main() {
  // 替换为你的Syncfusion许可密钥
  SyncfusionLicense.registerLicense('你的许可密钥');
  runApp(const MyApp());
}

2. 修正Web端PDF.js依赖版本

Syncfusion 26.1.39版本需要匹配特定版本的PDF.js,你当前使用的2.11.338版本存在兼容性问题。替换web/index.html中的PDF.js脚本:

<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.min.js"></script>
<script type="text/javascript">
  pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.4.120/build/pdf.worker.min.js";
</script>

同时检查base href设置,若你的Web部署根路径不是/web/,建议改为:

<base href="/">

3. 修复组件布局问题

当前代码中SfPdfViewer嵌套在SingleChildScrollView中且未指定高度,导致组件无法获取渲染空间。调整布局如下:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: const LogoAppBar(),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 给PDF Viewer设置固定高度和宽度
          SizedBox(
            height: 600,
            width: MediaQuery.of(context).size.width * 0.8,
            child: SfPdfViewer.network(
              'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
            ),
          ),
          const SizedBox(height: 20),
          SizedBox(
            height: 600,
            width: MediaQuery.of(context).size.width * 0.8,
            child: SfPdfViewer.network(widget.signedUrl),
          ),
        ],
      ),
    ),
  );
}

注:移除SingleChildScrollView,PDF Viewer自身带有滚动功能,嵌套会导致布局冲突。

4. 后续Azure Blob SAS链接排查(若公共PDF正常后仍有问题)

  • 确认SAS令牌包含**读取权限(r)**且未过期
  • 检查Azure Blob存储的CORS规则,允许你的Web域名发起GET请求,允许必要的请求头(如Content-Type)

5. 资产加载测试的正确方式

若测试本地资产PDF,需在pubspec.yaml中正确声明:

assets:
  - assets/sample.pdf

然后用以下方式加载(同样需设置高度):

SizedBox(
  height: 600,
  child: SfPdfViewer.asset('assets/sample.pdf'),
)

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.06.22 00:01:15