JAVA+PDF.js实现分页按需加载显示

原理参考:

https://blog.csdn.net/Shuphen/article/details/123543812

Java后端实现:

//获取源文件大小
long fileSize = inputFile.length();
//文件字节流的起始位置,截止位置
int startRange=0,endRange=0;
	boolean isRange = false;
	int readSize =0 ;
	//文件大于2M才进行分页加载
	if(fileSize > 2*1024*1024){

		
		String range = request.getHeader("range");
		//状态码
		int status = 200;
		if(StringUtils.isBlank(range)){
			//分页加载第一次请求,设置默认分页
			range = "bytes=0-65535";
			response.addHeader("Accept-Ranges","bytes");
			//首次请求,直接返回支持分片加载即可
		}else{
			status =206;
		}

		range = range.split("=")[1];
		String[] rangeArr = range.split("-");
		startRange = NumberUtils.getInteger(rangeArr[0]);
		endRange = NumberUtils.getInteger(rangeArr[1]);

		if(startRange>endRange || endRange>fileSize){
			return;
		}
		//需要读取的大小
		readSize = endRange - startRange + 1;
		isRange = true;

		response.setStatus(status);
		response.setContentLengthLong(status==200?fileSize : readSize);
		response.addHeader("Content-Range","bytes "+startRange+"-"+endRange+"/"+fileSize);
		response.addHeader("Access-Control-Expose-Headers","Accept-Ranges,Content-Range");
		//分片的文件流
		//response.setContentType("application/octet-stream");
	}

	OutputStream outputStream = null;
	BufferedInputStream bufferedInputStream = null;
	try {
		outputStream = response.getOutputStream();
		bufferedInputStream = new BufferedInputStream(new FileInputStream(inputFile));


		if(isRange){
			bufferedInputStream.skip(startRange);
		}

		int count = 0;
		byte[] buffer = new byte[1024*1024];
		while ((count = bufferedInputStream.read(buffer,0,buffer.length)) != -1) {
			if(isRange){
				if(readSize<=count){
					outputStream.write(buffer,0,readSize);
					break;
				}else{
					outputStream.write(buffer, 0, count);
					readSize = readSize - count;
				}
			}else{
				outputStream.write(buffer, 0, count);
			}

		}


		outputStream.flush();
	} catch (Exception e) {
		log.error("预览PDF文档发送错误:"+e.getMessage());
	} finally {
		if (outputStream != null) {
			try {
				outputStream.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		if (bufferedInputStream != null) {
			try {
				bufferedInputStream.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}

PDF.js设置更改
找到viewer.js,搜索disableAutoFetch关键字,把false改成true即可实现按需加载

要将 `disableAutoFetch` 和 `disableStream` 设置为 `true`,你要在使用 PDF.js 渲染 PDF 文件的地方进行相应的设置。具体的设置方法取决于你使用的 PDF.js 版本和集成方式。 在使用 PDF.js 的情况下,以下是两种常见的设置方法: 1. 使用 PDF.js 的默认设置: ```javascript pdfjsLib.GlobalWorkerOptions.workerSrc = 'path/to/pdf.worker.js'; pdfjsLib.disableAutoFetch = true; pdfjsLib.disableStream = true; ``` 在这个示例中,我们首先设置了 `pdf.worker.js` 的路径,然后将 `disableAutoFetch` 和 `disableStream` 设置为 `true`。这将禁用自动获取和流式传输,从而确保整个 PDF 文件在渲染之前完全加载。 2. 使用 PDF.js 的自定义配置: ```javascript const pdfLoadingTask = pdfjsLib.getDocument({ url: 'path/to/pdf.pdf' }); pdfLoadingTask.promise.then(function (pdf) { const pageNumber = 1; pdf.getPage(pageNumber).then(function (page) { const viewport = page.getViewport({ scale: 1 }); const canvas = document.getElementById('pdf-canvas'); const context = canvas.getContext('2d'); const renderContext = { canvasContext: context, viewport: viewport, disableAutoFetch: true, disableStream: true, }; page.render(renderContext); }); }); ``` 在这个示例中,我们首先通过 `pdfjsLib.getDocument` 方法加载 PDF 文件。然后,在渲染页面之前,我们将 `disableAutoFetch` 和 `disableStream` 设置为 `true`,并将其作为 `renderContext` 的一部分传递给 `page.render` 方法。 这些示例仅供参考,具体的设置方法可能因你使用的 PDF.js 版本和集成方式而异。请查阅 PDF.js 的文档或参考相关示例代码,以获取更具体的设置方法和参数说明。 如果你仍然遇到问题,请提供更多关于你的项目结构、使用的 PDF.js 版本以及相关代码示例的细节,以便我们能够更具体地帮助你解决问题。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值