pdfjs优化，实现按需加载，节省流量和内存

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1 问题

当使用pdfjs来实现预览功能的时候，遇到了2个问题：

一是带宽占用过大，会下载整个pdf文件，这对部署在公网的应用来说，成本压力很大，因为云服务带宽是很贵的。

二是内存占用过大，一个80M的pdf，在预览时占用内存高达600M，在一些内存较小的手机上容易发生崩溃。

pdfjs默认配置下，会加载所有的分片（内容），即使只预览一个页面也会加载整个文件。能不能实现按需加载呢？只加载所预览的页面？答案是可以，下面我就详细地介绍如何做。

2 测试环境

pdfjs 1.10.100 prebuild

chrome 76

springboot 2.1

3 步骤

3.1 原理

要实现按需下载，需要用到HTTP协议的范围(Range)请求。MSN站点中有关Range的介绍如下：

The Range HTTP request header indicates the part of a document that the server should return. Several parts can be requested with one Range header at once, and the server may send back these ranges in a multipart document. If the server sends back ranges, it uses the 206 Partial Content for the response. If the ranges are invalid, the server returns the 416 Range Not Satisfiable error. The server can also ignore the Range header and return the whole document with a 200 status code.

这段文字的大概意思是，客户端使用Range请求头，可以要求服务端返回文档的某个部分。如果服务端不支持，则响应200状态码并直接返回整个文档的内容。如果服务端支持，则在响应中使用206状态码并返回部分内容。

Range示例：
Range: bytes=200-1000
Range: bytes=0-499, -500

在HTTP服务器上，当它支持Range请求头时，也就实现了所谓的“分片下载”、“断点续传”功能。为行文的方便，下面都使用’分片下载’这个术语。