探究浏览器处理PDF文件时自动下载与预览的行为原因

背景

我们的系统使用Minio进行文件存储,并通过服务端提供统一的上传接口。此外,我们还使用Nginx进行服务代理。前端需求中包括对上传PDF文件的预览功能。

问题描述

在前端预览PDF文件时,我们采用window.open方法在新窗口中打开文件。期望的行为是浏览器能直接预览这些PDF文件。然而,在Chrome浏览器(版本号小于116)中,我们观察到了不一致的行为:

  • 可预览的PDF : 这些是单独上传的PDF文件,服务端返回的Content-Typeapplication/pdf。Chrome能够直接预览这种类型的文件。

  • 不可预览的PDF : 这些是打包成ZIP文件进行批量上传的PDF文件。服务端返回的Content-Typeapplication/octet-stream,导致Chrome会直接下载这些文件。

分析与解决方案

针对上述问题,我们有以下疑问:

  • 为什么同一个文件存储服务会返回不同的Content-Type

可能的原因:

  1. Nginx配置问题 : 可能对不同的PDF文件设置了不同的Content-Type头信息。

  2. 上传服务问题 : 在查看批量上传和单个上传的代码后,发现批量上传中有以下代码设置Content-Type

java 复制代码
FileItem item = new DiskFileItemFactory().createItem(
        file.getName() , 
        "application/octet-stream" , 
        true , 
        file.getName()
);

解决方案:

  • 调整Nginx的配置,确保返回的Content-Type头信息为application/pdf

  • 修改相关的Java代码,以设置正确的Content-Type

结语

祝大家周末愉快!

相关推荐
Bug-制造者8 分钟前
【Vue3 实战】全局错误处理体系搭建:实现业务与错误彻底解耦
前端·javascript·vue.js
程序员老邢10 分钟前
【技术底稿 37】Spring Boot 3.x 自动装配 “死锁” 排查:3 个注解实现条件化装配与 Mock 兜底
java·spring boot·后端·自动装配·rag·技术底稿
悟空瞎说11 分钟前
# Git 交互式变基:优雅整理提交历史,告别杂乱 PR 记录
前端·git
用户4343092416918 分钟前
Day29:图片上传 + 存数据库(Multer + MySQL)
数据库·后端
码路高手23 分钟前
Hermes Agent 整体了解
后端·架构
还有多久拿退休金24 分钟前
DragSortTable:一个让我怀疑人生的滚动重置 Bug
前端
日月云棠26 分钟前
JAVA数据结构与算法 - 基础:链表
java·后端
渐儿26 分钟前
组件库开发入门到生产(从零封装到 npm 发布)
前端
日月云棠29 分钟前
JAVA数据结构与算法 - 基础:栈 (Stack) 深度解析
java·后端
xiguolangzi32 分钟前
java使用Map映射遍历方法
java·后端