PDF.js 实现pdf分页加载的前端优化(实现按需加载)-前端的demo也已经上传

最新的PDF.js实现按需加载文章:SpringBoot+PDF.js实现按需分片加载预览(包含可运行示例源码)

描述

pdf.js实现了分片加载,但是在首次加载时自动加载了全部的pdf分片,导致打开了几个超过1g的pdf时,浏览器报出内存不足的提示

解决方案

实现pdf.js的按需加载,只需要修改属性disableAutoFetch为true,表示关闭自动获取,只会请求需要的分片,从而实现了按需加载,disableAutoFetch的默认值是false,表示会自动获取所有分片

实现效果如下,2G大小的pdf首次加载:
在这里插入图片描述

pdf.js的一些属性

initialData TypedArray 带有第一部分或全部pdf数据的类型化数组。由扩展使用,因为在切换到范围请求之前已经加载了一些数据。

disableRange 布尔 (可选)禁用PDF文件的范围请求加载。启用后,如果服务器支持部分内容请求,则将以块的形式提取PDF。默认值为“false”。

disableStream 布尔 (可选)禁用PDF文件数据的流式传输。默认情况下,PDF.js会尝试以块的形式加载PDF。默认值为“false”。

disableAutoFetch 布尔 (可选)禁用PDF文件数据的预取。启用范围请求后,即使不需要显示当前页面,PDF.js也会自动继续获取更多数据。默认值为“false”。注意:还必须禁用流式传输,请参阅上文,以便禁用预取功能以使其正常工作。

disableRange: true 样可以pdf.js可以实现pdf文件页码的自动选择


前端实现:
链接:https://pan.baidu.com/s/1DNRM0f5jRpCEvvip_IrCRA?pwd=tred
提取码:tred

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 17
    评论
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

徐州蔡徐坤

又要到饭了兄弟们

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值