跳到内容
  • 福昕首页
  • 开发中心
  • SDK文档资料
  • 福昕首页
  • 开发中心
  • SDK文档资料
申请试用
  • 企业自动化
    • Compressor
  • 福昕CloudAPI
  • 福昕PDF SDK 软件开发工具包
    • 福昕PDF SDK(ActiveX)
    • 福昕PDF SDK(桌面/服务器)
    • 福昕PDF SDK(Plug-in)
    • 福昕 PDF SDK(安卓)
    • 福昕PDF SDK(iOS)
    • 福昕PDF SDK(Web)
  • 福昕管理控制台
    • 公有云
    • 私有云
    • 通用情况
  • 福昕阅读器
    • RMS插件
  • 福昕高级编辑器
    • AI助手
    • Mac版本
      • 常规问题
    • windows版本
      • ECM集成
      • 互联PDF
      • 企业管理指南
      • 保护
      • 内容编辑
      • 创建PDF
      • 压缩
      • 图章
      • 安装与卸载
      • 常见问题
      • 打印
      • 注释/评论
      • 福昕插件
      • 翻译助手
      • 翻译助手教程
      • 试用与激活
      • 转换
      • 页面管理
    • 教育用户
      • 论文查重
      • 论文畅
      • 操作指南
    • 网页版
      • 电子签章
    • 订阅
    • 资源
  • 福昕高级编辑器Linux版本
  • 福船图纸管理系统
  • 福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)
  • 标签:
  • JavaScript,WebSDK,事件监听,动态计算,可视化,大文件加载,字节级计算,打开文件,文件流处理,进度条,进度监控,非侵入式集成

WebSDK大文件加载场景下的进度条可视化实现方案

  • 福昕知识库
  • 2025-06-27

在WebSDK处理本地大文件加载时,由于网络传输或文件解析耗时较长,缺乏可视化反馈易导致用户产生操作疑虑。本文提供基于文件流处理的可视化进度监控解决方案,通过动态计算文件加载比例实现进度条精准展示,核心实现逻辑如下:

技术实现要点:

1. 文件操作前初始化进度条组件

				
					const progressComponent = new PDFViewCtrl.viewerui.ProgressComponent();
				
			

2. 建立文件分块传输监听机制,实时计算并更新进度百分比

				
					async function CustomOpen(url)
        {
            pdfui.close();
            progressComponent.show(document.body);
            progressComponent.updateProgress(0, PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING);
            // 1. 发起请求并获取流读取器
            var response = await fetch(url);
            
            const reader = response.body.getReader();
            
            // 2. 获取总长度
            const contentLength = +response.headers.get('Content-Length');
            let receivedLength = 0;
            let chunks = [];
            
            // 3. 读取数据块
            while(true) {
                const {done, value} = await reader.read();
                if (done) break;
                
                chunks.push(value);
                receivedLength += value.length;
                const percent = Math.round((receivedLength / contentLength) * 100);
                progressComponent.updateProgress(percent, PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING);
            }
            // 4. 合并数据块
            const chunksAll = new Uint8Array(receivedLength);
            let position = 0;
            for(let chunk of chunks) {
                chunksAll.set(chunk, position);
                position += chunk.length;
            }
            
            
            pdfui.openPDFByFile(chunksAll)
            
        }
				
			

3. 文件加载完成后执行进度条销毁逻辑

				
					pdfui.addViewerEventListener(Events.openFileSuccess, function () {
           
            if(progressComponent)
            {
                progressComponent.updateProgress(100, PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING);
                progressComponent.hide()
            }
        });
        pdfui.addViewerEventListener(Events.openFileFailed, function 
            
            if(progressComponent)
            {
                progressComponent.updateProgress(100, PDFViewCtrl.constants.PROGRESS_STATUS.PROGRESSING);
                progressComponent.hide()
            }
        });
				
			

如图所示,该方案实现了:

  • 实时反映文件加载状态

  • 精确到字节级的进度计算

  • 非侵入式的原生事件集成

注意事项:

  1. SDK原生demo已集成progress事件监听

  2. 自定义UI组件需遵循官方设计规范(技术文档参考:https://devdocs.fuxinsoft.cn/development-guide/pdf-sdk-web/customize/progress-component.html)

相关内容

解决自定义Item添加铅笔注释后保存内容丢失的问题​

如何在WebSDK中设置选中文本后不显示选择提示控件

如何设置Word/Excel/PPT转PDF的默认引擎(微软Office或WPS)?

福昕PDF编辑器(移动端)常用功能指南:编辑、高亮、标注、新建页面……

多个PDF文档搜索同一关键词,并导出数据,如何操作?

如何一次性修改PDF文档中的字体?

PDF书签跳转后缩放被重置?承前缩放:一招锁定阅读比例!

如何获取服务器ID以更新福昕管理后台授权?

PDFViewCtrl移动端集成:禁用WebViewer双击注释弹窗的代码实现

安装时提示无法访问 Windows Installer 服务

推荐内容

解决自定义Item添加铅笔注释后保存内容丢失的问题​

如何在WebSDK中设置选中文本后不显示选择提示控件

如何设置Word/Excel/PPT转PDF的默认引擎(微软Office或WPS)?

福昕PDF编辑器(移动端)常用功能指南:编辑、高亮、标注、新建页面……

多个PDF文档搜索同一关键词,并导出数据,如何操作?

如何一次性修改PDF文档中的字体?

PDF书签跳转后缩放被重置?承前缩放:一招锁定阅读比例!

如何获取服务器ID以更新福昕管理后台授权?

PDFViewCtrl移动端集成:禁用WebViewer双击注释弹窗的代码实现

安装时提示无法访问 Windows Installer 服务

产品
  • 应用行业
  • 白皮书
开发支持
  • 开发中心
  • SDK文档资料

销售咨询:010-50951668

客服电话:0591-38509808

销售咨询
微信公众号

©2025 福建福昕软件开发股份有限公司 版权所有

隐私策略