SpringBoot+PDF.js实现按需分片加载预览（包含可运行示例源码）

前言

本文的解决方案旨在解决大体积PDF在线浏览加载缓慢、影响用户体验的难题。通过利用分片加载技术，前端请求时附带range及读取大小信息，后端据此返回相应的PDF文件流。这种方式有效地减轻了服务器和浏览器的负担，提升了加载速度和用户体验。同时解决了首次加载全部分片导致浏览器内存不足的问题。

技术栈：Spring Boot、Vue和pdf.js。

分片加载的效果

前端项目

前端项目结构

前端核心代码

index.vue

<template>
  <div class="pdf">
    <iframe
      :src="`/static/pdf/web/viewer.html?file=${encodeURIComponent(src)}`"
      frameborder="0"
      style="width: 100%; height: calc(100vh)"
    ></iframe>
  </div>
</template>

<script>
import baseUrl from "@/api/baseurl.js";
export default {
  data() {
    return {
      baseUrl: baseUrl.baseUrl,
      src: "",
      loading: false,
    };
  },
  created() {},
  methods: {
    getPdfCode: function () {
      this.loading = true;
      // 这里是请求分片的接口，看情况修改
      this.src = `http://localhost:8181/v1/pdf/load`;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getPdfCode();
    });
  },
};
</script>

<style lang="scss" scoped></style>

前端项目运行

首先确保vue需要的运行环境已经安装(nodejs)，我使用的版本：12.18.2，然后使用vscode打开项目，在终端输入命令：

npm install
npm run serve

后端项目

后端项目结构

本示例只是一个简单的springboot项目，核心文件PDFController.java用于分片加载接口，CORSFilter.java为跨域配置

后端核心代码

这段代码实现了使用 PDF.js 进行分片加载 PDF 文件的功能。下面是代码的主要实现思路：

1. 首先，通过 ResourceUtils.getFile 方法获取类路径下的 PDF 文件，并将其读取为字节数组 pdfData。
2. 然后，判断文件大小是否小于指定的阈值（1MB），如果小于阈值，则直接将整个文件作为响应返回。修改了小体积pdf小于分片大小时无法访问的bug
3. 如果文件大小超过阈值，就根据请求头中的 Range 字段判断是否为断点续传请求。
4. 如果是首次请求或者没有 Range 字段，则返回整个文件的字节范围，并设置响应状态为 SC_OK（响应码200）。
5. 如果是断点续传请求，则解析 Range 字段获取请求的起始位置和结束位置，并根据这些位置从文件中读取相应的字节进行响应。
6. 在响应头中设置 Accept-Ranges 和 Content-Range 属性，告知客户端服务器支持分片加载，并指定本次返回的文件范围。
7. 最后，设置响应的内容类型为 application/octet-stream，内容长度为本次返回的字节数，然后刷新输出流，将数据返回给客户端。

这样，客户端就可以使用 PDF.js 来分片加载显示 PDF 文件了。

PDFController.java

/**
/**
 * pdf分片加载的后端实现
 *
 * @param response
 * @param request
 * @throws FileNotFoundException
 */
@GetMapping("/load")
public void loadPDFByPage(HttpServletResponse response, HttpServletRequest request) throws FileNotFoundException {
   

    // 获取pdf文件，建议pdf大小超过20mb以上
    File pdf = ResourceUtils.getFile("classpath:需要分片加载的pdf.pdf");
    byte[] pdfData = new byte[0];
    try {
   
        pdfData = FileUtils.readFileToByteArray(pdf);
    } catch (IOException e) {
   
        throw new RuntimeException(e);
    }

    // 以下为pdf分片的代码
    try (InputStream is = new ByteArrayInputStream(pdfData)