Java服务端完美展示PDF 预览让前端页面一览无余

2023-07-12 02:15:17

Java后端：让PDF预览在前端绚丽绽放

引言

在现代Web开发中，提供流畅的用户体验至关重要。当需要在前端预览PDF文件时，传统的下载和本地打开方法显得有些过时。本文将介绍两种优雅的方法，使用Java后端将PDF预览直接返回给前端，为您的用户带来无缝的PDF浏览体验。

方式一：返回Blob流

Blob流是一种二进制数据流，它可以直接在浏览器中处理，而无需下载。通过这种方法，Java后端可以将PDF文件作为Blob流返回给前端。前端可以使用浏览器内置的PDF查看器直接预览PDF。

方式二：编码为Base64字符串

对于需要在不同环境中预览PDF的情况，Base64编码是一种灵活的选择。Base64是一种将二进制数据转换为文本表示形式的方法。Java后端可以将PDF文件编码为Base64字符串，并将其返回给前端。前端随后可以解码Base64字符串并将其转换为Blob流，以便在浏览器中预览。

代码示例

返回Blob流：

@GetMapping("/preview/pdf")
public ResponseEntity<byte[]> previewPdf() {
    // 获取PDF文件字节数组
    byte[] bytes = getPdfBytes();

    // 创建Blob流
    Blob blob = new Blob(bytes);

    // 将Blob流返回给前端
    return ResponseEntity.ok()
            .header(HttpHeaders.CONTENT_TYPE, "application/pdf")
            .header(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=\"preview.pdf\"")
            .body(blob);
}

编码为Base64字符串：

@GetMapping("/preview/pdf")
public ResponseEntity<String> previewPdf() {
    // 获取PDF文件字节数组
    byte[] bytes = getPdfBytes();

    // 将PDF文件字节数组编码为Base64字符串
    String base64String = Base64.getEncoder().encodeToString(bytes);

    // 将Base64字符串返回给前端
    return ResponseEntity.ok()
            .header(HttpHeaders.CONTENT_TYPE, "application/json")
            .body("{\"base64String\": \"" + base64String + "\"}");
}

前端解析

方式一：

const blob = new Blob([response.data]);
const pdfUrl = URL.createObjectURL(blob);
window.open(pdfUrl);

方式二：

const base64String = response.data.base64String;
const bytes = Base64.decode(base64String);
const blob = new Blob([bytes]);
const pdfUrl = URL.createObjectURL(blob);
window.open(pdfUrl);

优势对比

返回Blob流：