探究浏览器处理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

结语

祝大家周末愉快!

相关推荐
Nturmoils5 分钟前
向量数据库不该成为新孤岛:KingbaseES 多模融合架构如何减少数据搬运
后端
一座古城6 分钟前
Claude Code 架构源码解析:AI 应用开发的范式跃迁
前端·后端
Nturmoils6 分钟前
用蓝耘元生代做 GitHub 热榜解读:Dify Chatflow 接入和真实项目分析
后端
K哥爬虫7 分钟前
【JS 逆向百例】Vaptcha V4 手势验证码逆向分析
前端·后端
用户921080262868 分钟前
复盘 AI Coding 工作台的流式链路:从 Sender 输入到 SSE 分流,再到 BubbleList 和右侧预览
前端
了不起的小明12 分钟前
SwiftMesh:本地 3D 模型查看器,加密交付 + 转盘录屏一站式搞定,开源免费
前端
qq_1851986914 分钟前
SpringBoot-五-AOT
java·spring boot·后端
默_笙15 分钟前
👍 我的代码被 ESLint 抓包了:单引号、var、没分号——全被当场点名
前端·javascript
搞个锤子哟15 分钟前
vue项目引入icon的问题
前端
用户299759971270716 分钟前
Service 层到底该 throw 异常还是 return 错误码?我在两个团队各推行过一种,最后被一个事务 Bug 说服了
后端