前言:

主要解决大体积pdf在线浏览加载缓慢，影响用户体验的问题
技术栈为：SpringBoot、Vue、pdfjs
主要核心思路：前端请求时请求头附带请求范围range及读取大小，后端根据请求头返回相应的pdf文件流

后端实现

     @GetMapping("/load")public void loadPDFByPage(HttpServletResponse response, HttpServletRequest request,@RequestParam("dataId") long dataId,@RequestParam("archiveSid") String archiveSid) {//dataId, archiveSid参数只是为了获取到pdf的File对象          File pdf = pdfReadService.getArchive(dataId, archiveSid);try (InputStream is = new FileInputStream(pdf);BufferedInputStream bis = new BufferedInputStream(is);OutputStream os = response.getOutputStream();BufferedOutputStream bos = new BufferedOutputStream(os)) {// 下载的字节范围int startByte, endByte, totalByte;if (request != null && request.getHeader("range") != null) {// 断点续传String[] range = request.getHeader("range").replaceAll("[^0-9\\-]", "").split("-");// 文件总大小totalByte = is.available();// 下载起始位置startByte = Integer.parseInt(range[0]);// 下载结束位置if (range.length > 1) {endByte = Integer.parseInt(range[1]);} else {endByte = totalByte - 1;}// 返回http状态response.setStatus(206);} else {// 正常下载// 文件总大小totalByte = is.available();// 下载起始位置startByte = 0;// 下载结束位置endByte = totalByte - 1;// 返回http状态response.setHeader("Accept-Ranges", "bytes");response.setStatus(200);}// 需要下载字节数int length = endByte - startByte + 1;//表明服务器支持分片加载response.setHeader("Accept-Ranges", "bytes");//Content-Range: bytes 0-65535/408244，表明此次返回的文件范围response.setHeader("Content-Range", "bytes " + startByte + "-" + endByte + "/" + totalByte);//告知浏览器这是一个字节流，浏览器处理字节流的默认方式就是下载response.setContentType("application/octet-stream");//表明该文件的所有字节大小response.setContentLength(length);//需要设置此属性，否则浏览器默认不会读取到响应头中的Accept-Ranges属性，因此会认为服务器端不支持分片，所以会直接全文下载response.setHeader("Access-Control-Expose-Headers", "Accept-Ranges,Content-Range");// 响应内容bis.skip(startByte);int len = 0;byte[] buff = new byte[1024 * 64];while ((len = bis.read(buff, 0, buff.length)) != -1) {if (length <= len) {bos.write(buff, 0, length);break;} else {length -= len;bos.write(buff, 0, len);}}} catch (IOException e) {e.printStackTrace();}}

注意事项

1.首次加载返回状态码200，注意以下属性服务器端在响应头中务必要加上

 //表明服务器支持分片加载
response.setHeader("Accept-Ranges", "bytes");//Content-Range: bytes 0-65535/408244，表明此次返回的文件范围
response.setHeader("Content-Range", "bytes " + startByte + "-" + endByte + "/" + totalByte);//告知浏览器这是一个字节流，浏览器处理字节流的默认方式就是下载
response.setContentType("application/octet-stream");//表明该文件的所有字节大小
response.setContentLength(length);//需要设置此属性，否则浏览器默认不会读取到响应头中的Accept-Ranges属性，因此会认为服务器端不支持分片，所以会直接全文下载
response.setHeader("Access-Control-Expose-Headers", "Accept-Ranges,Content-Range");

2.之后每次请求都会返回206，即已经实现分片加载。Content-Range: bytes 0-65535/408244，表明此次返回的文件范围

遇到的问题

前端的同学在配置完成PDF.js后，调用始终是一个请求加载了全部文件，并未分片加载

首先服务端响应头返回Accept-Ranges: bytes，就表明服务器端支持分片加载，pdf.js就会自动启用分片加载文件的策略。由于浏览器默认只允许js读取以下的响应头，而Accept-Ranges: bytes是不支持的，这就造成pdf.js读取Accept-Ranges时，读到了null值，认为你的服务器不支持分片，故整个文件下载了。

解决方法：在服务端的返回响应头上增加：

'Access-Control-Expose-Headers'：'Accept-Ranges,Content-Range'

前端实现

我搞后端滴，前端自己看下边的文档
https://www.cnblogs.com/ingrid/articles/15886403.html

Java后台+PDF.js 实现pdf分页加载的后端实现相关推荐

使用 pdf.js 在网页中加载 pdf 文件
在网页中加载并显示PDF文件是最常见的业务需求.例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票.(2)电子政务管理系统中查看发布的公文,公文文件一般是PDF格式的文件. 目前 ...
PDF.js 实现pdf分页加载的前端优化(实现按需加载)-前端的demo也已经上传
描述 pdf.js实现了分片加载,但是在首次加载时自动加载了全部的pdf分片,导致打开了几个超过1g的pdf时,浏览器报出内存不足的提示解决方案实现pdf.js的按需加载,只需要修改属性disab ...
如何在项目中使用pdf.js查看PDF文件
最近在做后台管理类的系统,需要在web页面阅读pdf文件.发现一个很好用的插件 pdf.js,简单的介绍一下官方文档地址:http://mozilla.github.io/pdf.js/ 在线演示地 ...
上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据...
现在是一次性加载所有的记录数据,数据多的时候,会加载比较慢,所以我们改成分页加载,一次最多加载15条数据每次拉倒底部都会自动加载下一页的数据,知道所有的数据加载完成 1.添加data变量编辑rec ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
Vue3 + PDF.js 实现 PDF 预览
文章目录 1 前言 2 PDF 预览测试 2.1 下载 PDF.js 2.2 window.open 直接打开 2.3 弹框形式打开 3 修改配置项 3.1 修改主题色为暗色系 3.2 修改默认语言为 ...
【iframe结合pdf.js实现pdf的预览/下载及打印功能】
iframe结合pdf.js实现pdf的预览/下载及打印 1.[下载pdf.js](http://mozilla.github.io/pdf.js/getting_started/#download) ...
html 提取pdf,使用PDF.js从PDF中提取文本(2019)
正如标题所说,我正在尝试使用由Mozilla维护的PDF.js从PDF中提取文本.我知道前面关于stackoverflow的问题,但我不知道从哪里开始. 我试着跟着这个 article 这件事我需要帮 ...
vue里使用pdf.js实现pdf文件的预览功能
引言:经过上一篇文章的测试,发现了以下问题: 兼容性不好不适用多语言场景(不能共用一套) 会出现跨域问题难于监控阅读状态不能控制下载状态在基于vue开发的移动项目中,如果预览的pdf数量不是很 ...

Java后台+PDF.js 实现pdf分页加载的后端实现

前言:

后端实现

注意事项

遇到的问题

前端实现

Java后台+PDF.js 实现pdf分页加载的后端实现相关推荐

最新文章

热门文章