为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载

简介: 为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载

目录


为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载,

出现图片、PDF不能预览的情况,主要是通过代码输出文件流的形式,非IIS、Nginx下直接访问资源的方式产生的

在HTTP中,用于文件下载的常见响应头(response headers)包括:

Content-Disposition: 用于指示浏览器应该如何处理响应体。在文件下载中,通常设置为 attachment; filename="filename.jpg",其中 filename.jpg 是要下载的文件名。

Content-Type: 指示响应体的MIME类型,例如 image/jpeg 或 application/pdf。

Content-Length: 响应体的长度(以字节为单位)。

Cache-Control: 控制缓存的行为,通常可以设置为 no-cache 禁止缓存。

Expires: 指定响应的过期时间,与 Cache-Control 一起使用来控制缓存。

Pragma: 旧版本的HTTP使用的头部,现在基本不再使用,可以设置为 no-cache。

Content-Disposition

Content-Disposition 是一个HTTP响应头部,指示浏览器如何处理接收到的响应体内容。它可以让服务器指定一个文件名,或者指示浏览器直接显示内容(inline)或者将内容作为附件下载(attachment)。

  • inline:浏览器尝试在页面内显示响应内容,通常用于非下载内容,如 PDF 在线预览。
  • attachment:浏览器强制下载响应内容,并提示用户保存到本地。
Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="example.txt"

文件下载

通常情况下,服务器会使用 Content-Disposition: attachment 头部来强制浏览器下载文件,而不是尝试在浏览器中打开它。例如:

Content-Disposition: attachment; filename="example.pdf"
Content-Type: application/pdf

内联显示

服务器可能希望浏览器直接在页面内显示内容,而不是下载它。例如,对于一些直接展示的文件类型(如图片、PDF等),可以使用

Content-Disposition: attachment; filename="example.pdf"
Content-Type: application/pdf

代码示例

SpringBoot 接口输出文件流:

https://www.cnblogs.com/vipsoft/p/16662762.html

https://www.cnblogs.com/vipsoft/p/16318030.html

//省去判断,参考下面的C#
headers.add("Content-Disposition", "attachment; filename=" + URLEncoder.encode(file.getName(), "UTF-8"));   //如果是 attachment 换成 inline ,像PDF,图片这样的就可以在浏览器内直接预览了
headers.add("filename",  URLEncoder.encode(file.getName(), "UTF-8"));
headers.add("Access-Control-Expose-Headers", "filename");  //这个要加,否则Vue 在 res.headers['filename'] 时取不到值

C# 伪代码

[HttpGet]
[Route("reportFile")]
public HttpResponseMessage ReportFile([FromBody] Order param)
{
  HttpResponseMessage result = null;
  try
  {   
      string projectId = HttpContext.Current.Request.QueryString["ProjectId"];
    FileInfo foundFileInfo = new FileInfo(filePath);  
    if(!foundFileInfo.Exists)
    { 
      return new HttpResponseMessage(HttpStatusCode.NotFound);
    }
    string mediaType = "application/pdf";
    string contentDisposition = "attachment"; 
    //根据服务器文件的扩展名决定使用什么样的方式输出
    switch (foundFileInfo.Extension)
    {
      case ".xml":
        mediaType = "text/xml"; 
        contentDisposition = "inline; //浏览器预览
      break;
      case ".pdf":
        mediaType = "application/pdf";
        contentDisposition = "inline; //浏览器预览
      break;
      case ".jpg":
      case ".jpeg":
        mediaType = "image/jpg";
        contentDisposition = "inline; //浏览器预览
      break;
      case ".png":
        mediaType = "image/png";
        contentDisposition = "inline; //浏览器下载
      break;
      ...
      default:
        mediaType = "application/octet-stream"; 
        contentDisposition = "attachment"; //浏览器下载
      break;
    } 
    FileStream fs = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.ReadWrite);
    result = new HttpResponseMessage(HttpStatusCode.OK);
    result.Content = new StreamContent(fs);
    //result.Content.Headers.Add("MD5File", Md5Helper.GetMD5HashFromFile(filePath)); //可以在Header里加上 md5 校验码
    result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(mediaType);
    result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue(contentDisposition);
    result.Content.Headers.ContentDisposition.FileName = foundFileInfo.Name;
  }
  catch (Exception ex)
  {
    logger.Error(ex, ex.Message);
    result = new HttpResponseMessage(HttpStatusCode.BadRequest);
  }
  return result;
}

常见的媒体类型

  • text/plain:纯文本。
  • text/html:HTML 文档。
  • application/json:JSON 数据。
  • application/xml:XML 数据。
  • image/jpeg、image/png:JPEG 或 PNG 图像。
  • multipart/form-data:用于文件上传的表单数据。

文件上传

在使用表单上传文件时,通常会使用 multipart/form-data 媒体类型,并指定边界字符串。例如:

Content-Type: multipart/form-data; boundary=---------------------------7d33a816d302b6


目录
相关文章
|
16天前
|
Web App开发 Linux 数据安全/隐私保护
Apple Safari 26 正式版发布 - macOS 专属浏览器 (独立安装包下载)
Apple Safari 26 正式版发布 - macOS 专属浏览器 (独立安装包下载)
117 0
|
3月前
|
前端开发
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),保存资源(图片、脚本、CSS)
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),保存资源(图片、脚本、CSS)
213 33
|
3月前
|
C#
【PDF提取内容改名】批量提取PDF指定区域内容重命名PDF文件,PDF自动提取内容命名的方案和详细步骤
本工具可批量提取PDF中的合同编号、日期、发票号等关键信息,支持PDF自定义区域提取并自动重命名文件,适用于合同管理、发票处理、文档归档和数据录入场景。基于iTextSharp库实现,提供完整代码示例与百度、腾讯网盘下载链接,助力高效处理PDF文档。
433 40
|
4月前
|
人工智能 文字识别 自然语言处理
熊猫 OCR 识别软件下载,支持截图 OCR、PDF 识别、多语言翻译的免费全能工具,熊猫OCR识别
本文介绍了几款实用的图文识别软件,包括熊猫OCR、Umi-OCR和天若OCR_本地版。熊猫OCR功能强大,支持多窗口操作、AI找图找色、OCR识别等;Umi-OCR免费且高效,具备截图OCR、批量处理等功能;天若OCR界面简洁,适合快速文字识别。文章还提供了下载链接及软件特点、界面展示等内容,便于用户根据需求选择合适的工具。
344 36
|
3月前
|
机器学习/深度学习 人工智能 文字识别
浏览器AI模型插件下载,支持chatgpt、claude、grok、gemini、DeepSeek等顶尖AI模型!
极客侧边栏是一款浏览器插件,集成ChatGPT、Claude、Grok、Gemini等全球顶尖AI模型,支持网页提问、文档分析、图片生成、智能截图、内容总结等功能。无需切换页面,办公写作效率倍增。内置书签云同步与智能整理功能,管理更高效。跨平台使用,安全便捷,是AI时代必备工具!
217 8
|
3月前
|
编译器 Python
如何利用Python批量重命名PDF文件
本文介绍了如何使用Python提取PDF内容并用于文件重命名。通过安装Python环境、PyCharm编译器及Jupyter Notebook,结合tabula库实现PDF数据读取与处理,并提供代码示例与参考文献。
|
4月前
|
数据采集 Web App开发 JavaScript
无头浏览器技术:Python爬虫如何精准模拟搜索点击
无头浏览器技术:Python爬虫如何精准模拟搜索点击
|
4月前
|
存储 安全 算法
Java 集合面试题 PDF 下载及高频考点解析
本文围绕Java集合面试题展开,详细解析了集合框架的基本概念、常见集合类的特点与应用场景。内容涵盖`ArrayList`与`LinkedList`的区别、`HashSet`与`TreeSet`的对比、`HashMap`与`ConcurrentHashMap`的线程安全性分析等。通过技术方案与应用实例,帮助读者深入理解集合类的特性和使用场景,提升解决实际开发问题的能力。文末附带资源链接,供进一步学习参考。
98 4
|
5月前
|
人工智能 算法 安全
使用CodeBuddy实现批量转换PPT、Excel、Word为PDF文件工具
通过 CodeBuddy 实现本地批量转换工具,让复杂的文档处理需求转化为 “需求描述→代码生成→一键运行” 的极简流程,真正实现 “技术为效率服务” 的目标。感兴趣的快来体验下把
163 10
|
4月前
|
数据采集 存储 API
Python爬虫结合API接口批量获取PDF文件
Python爬虫结合API接口批量获取PDF文件