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

结语

祝大家周末愉快!

相关推荐
@PHARAOH4 分钟前
HOW - 构建一个轻量前后端一体服务
前端·微服务·服务端
无限进步_15 分钟前
【C++】C++11的类功能增强与STL变化
java·前端·数据结构·c++·后端·算法
字节跳动数据库15 分钟前
TRAE × 火山引擎 Supabase:为你的 AI 应用装上“数据引擎”
人工智能·后端
一只小小Java16 分钟前
Echarts单表多图实现
前端·javascript·echarts
dunky25 分钟前
Spring AI 深度解析:把 LLM 抽象成 Spring Bean 的底层逻辑
前端
星栈26 分钟前
Rust WASM 文件上传全链路:从浏览器到 S3,一个字节都不能少
前端·前端框架·开源
濮水大叔26 分钟前
告别 Django Admin!这个 NodeJS 全栈框架让你在 DTO 中直接配置 Table/Form 渲染
前端·typescript·node.js
JarvanMo27 分钟前
Flutter 3.44 & Dart 3.12重磅发布!这些新特性太香了
前端
竹林81827 分钟前
用Viem替换ethers.js:一次合约交互的"减负"实战,我总算把TypeScript类型搞明白了
前端·javascript
用户67570498850228 分钟前
Python 统一大业:uv 如何整合 Pip、Pyenv 和 Venv?
后端·python