之前文章说到了如何通过将文件转成图片或者pdf来实现在线预览,一般来说在线预览图片或者pdf都是存储在图片服务器上的,在通过接口调用把文件返回给前端,但是把文件返回给前端效果一般是有两种:在线预览和下载。那这两种效果分别又该怎么实现呢?我们今天就来说这两种效果的实现。

下面是之前转成图片、pdf实现线预览,有兴趣的小伙伴可以看看。

文档在线预览(一)通过将txt、word、pdf转成图片实现在线预览功能

文档在线预览(四)将word、txt、ppt、excel、图片转成pdf来实现在线预览

​ 其实接口实现在线预览和下载很简单,只需要通过设置content-type和Content-Disposition这两个http的响应标头就可以实现:

​ Content-Disposition是HTTP协议中的一个头部字段,用于指示如何显示附加的文件。它是MIME协议的扩展,最初在MIME标准中定义。Content-Disposition头部字段可以控制用户请求所得的内容存为一个文件的时候提供一个默认的文件名,文件直接在浏览器上显示或者在访问时弹出文件下载对话框。

在常规的 HTTP 应答中,Content-Disposition 响应标头指示回复的内容该以何种形式展示,是以内联的形式(即网页或者页面的一部分),还是以附件的形式下载并保存到本地。

multipart/form-data 类型的应答消息体中,Content-Disposition 通用标头可以被用在 multipart 消息体的子部分中,用来给出其对应字段的相关信息。各个子部分由在 Content-Type中定义的边界(boundary)分隔。用在消息体自身则无实际意义。

作为消息主体的标头

在 HTTP 场景中,第一个参数有以下两种

  • inline:表示回复中的消息体会以页面的一部分或者整个页面的形式展示
  • attchment:以附件形式被下载到本地;大多数浏览器会呈现一个“保存为”的对话框,将 filename 的值预填为下载后的文件名,假如它存在的话

第二个参数 filename 代表被传输的文件名称(可选)

Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

备注: 在同源 URL情况下,Chrome 和 Firefox 82 以及更高的版本会优先使用 HTML 的 元素的 download 属性而不是 Content-Disposition: inline 参数来处理下载。而 Firefox 的早期版本则优先使用标头信息并内联显示内容。

作为多部分主体的标头

当使用 multipart/form-data 格式提交表单数据(HTTP 表单及 POST 请求)时,每个子部分(例如每个表单字段和任何与字段数据相关的文件)都需要提供一个 Content-Disposition 标头,以提供相关信息。标头的第一个参数始终为 form-data,并且还必须包含一个 name 参数来标识相关字段。,以及可选的第三个参数 filename

Content-Disposition: form-data; name="fieldName"
Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"

下面将通过代码演示通过设置content-type响应标头来实现图片、pdf的在线预览和下载,为返回的代码基本一样所以封装了一个公共方法,后面代码将通过调用这个公共方法来演示:

所用到的工具类代码:

import lombok.extern.slf4j.Slf4j;
import org.apache.tika.Tika;
import org.springframework.http.*;
import org.springframework.stereotype.Component;
import java.net.URLEncoder;
import java.util.concurrent.TimeUnit; @Component
@Slf4j
public class HttpUtil {
public static ResponseEntity<?> getResponseEntity(byte[] fileContent, String contentDispositionType, String originalFileName){
ResponseEntity.BodyBuilder responseEntity = ResponseEntity.*ok*();
HttpHeaders httpHeaders = new HttpHeaders();
Tika tika = new Tika();
String mediaType = tika.detect(fileContent);
httpHeaders.setContentType(MediaType.*parseMediaType*(mediaType));
httpHeaders.setContentDisposition(ContentDisposition.*builder*(contentDispositionType)
.filename(URLEncoder.encode(originalFileName)).build());
httpHeaders.setCacheControl(CacheControl.noCache());
//httpHeaders.setCacheControl(CacheControl.maxAge(10, TimeUnit.MINUTES));
return responseEntity.headers(httpHeaders).body(fileContent);
}
}

1、图片预览:

@GetMapping(value = "/image/review")
public ResponseEntity<?> imageReview() throws IOException {
File file = new File("D:\\picture\\美女\\aa37a7be4196c07f43a3f776801d1b46.jpg");
try (FileInputStream fileInputStream = new FileInputStream(file)) {
byte[] buf = new byte[fileInputStream.available()];
fileInputStream.read(buf);
return HttpUtil.getResponseEntity(buf, "inline", "aa37a7be4196c07f43a3f776801d1b46.jpg");
}
}

实现效果:

2、图片下载:

@GetMapping(value = "/image/down")
public ResponseEntity<?> imageDown() throws IOException {
File file = new File("D:\\picture\\美女\\aa37a7be4196c07f43a3f776801d1b46.jpg");
try (FileInputStream fileInputStream = new FileInputStream(file)) {
byte[] buf = new byte[fileInputStream.available()];
fileInputStream.read(buf);
return HttpUtil.getResponseEntity(buf, "attachment", "aa37a7be4196c07f43a3f776801d1b46.jpg");
}
}

实现效果:

3、pdf预览:

@GetMapping(value = "/pdf/review")
public ResponseEntity<?> pdfReview() throws IOException {
File file = new File("D:\\书籍\\电子书\\其它\\自然哲学的数学原理.pdf");
try (FileInputStream fileInputStream = new FileInputStream(file)) {
byte[] buf = new byte[fileInputStream.available()];
fileInputStream.read(buf);
return HttpUtil.*getResponseEntity(buf, "inline", file.getName());
}
}

实现效果:

4、pdf下载:

@GetMapping(value = "/pdf/down")
public ResponseEntity<?> pdfDown() throws IOException {
File file = new File("D:\\书籍\\电子书\\其它\\自然哲学的数学原理.pdf");
try (FileInputStream fileInputStream = new FileInputStream(file)) {
byte[] buf = new byte[fileInputStream.available()];
fileInputStream.read(buf);
return HttpUtil.getResponseEntity(buf, "" +
""
, file.getName());
}
}

实现效果:

参考资料:Content-Disposition - HTTP | MDN

java接口返回图片链接或pdf链接如何设置在线预览还是下载的更多相关文章

  1. Java实现office文档与pdf文档的在线预览功能

    最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完 ...

  2. pdf word excel ppt 在线预览方案收集

    https://www.idocv.com/docs.html http://www.cnblogs.com/wolf-sun/p/3569960.html http://coolwanglu.git ...

  3. word、excel、pdf等多种格式在线预览

    第一种方式: 具体功能说明: http://view.xdocin.com/index.html 调用案例: <a href="http://www.xdocin.com/xdoc?_ ...

  4. 浏览器在线预览pdf、txt、office文件

    //使用文件预览的原因是:TMD微信浏览器屏蔽掉文件下载链接,只好折中使用文件在线预览功能//要点:1.office文件用微软的插件打开 http://view.officeapps.live.com ...

  5. 前端实现在线预览pdf、docx、xls、ppt等文件

    思路:前台将各种格式的附件上传到服务器----后台通过方法将这些格式的文件转化成图片,前台通过放映ppt的方式将其展示在页面上. 关键点:reveal.js 参考文章:https://www.awes ...

  6. 使用PDF.JS实现pdf文件在线预览时,报文件被损坏的错误

    首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 <iframe src="<c:url value="js/gen ...

  7. pc或者微信上用pdf.js在线预览pdf和word

    最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...

  8. Java实现web在线预览office文档与pdf文档实例

    https://yq.aliyun.com/ziliao/1768?spm=5176.8246799.blogcont.24.1PxYoX 摘要: 本文讲的是Java实现web在线预览office文档 ...

  9. 使用java的 htpUrlConnection post请求 下载pdf文件,然后输出到页面进行预览和下载

    使用java的 htpUrlConnection post请求 下载pdf文件,然后输出到页面进行预览和下载 2018年06月07日 10:42:26 守望dfdfdf 阅读数:235 标签: jav ...

  10. Java通过openOffice实现word,excel,ppt转成pdf实现在线预览

    Java通过openOffice实现word,excel,ppt转成pdf实现在线预览 一.OpenOffice 1.1 下载地址 1.2 JodConverter 1.3 新建实体类PDFDemo ...

随机推荐

  1. Hyperf框架环境搭建

    https://hyperf.wiki/2.2/#/README 1.PHP 7.2 以上查看PHP : php -vcurl 127.0.0.1:9501 查看是否装swoole: php --ri ...

  2. CTF-RE-学习记录-汇编

    八进制运算 加法表 1+1=2 1+2=3 2+2=4 1+3=4 2+3=5 3+3=6 1+4=5 2+4=6 3+4=7 4+4=10 1+5=6 2+5=7 3+5=8 4+5=11 5+5= ...

  3. LeeCode 回溯问题

    1 组合问题 LeeCode 39:组合总和 题目描述 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 ta ...

  4. 从0到1手把手教你ASP.NET Core Web API项目配置接口文档Swagger(二)

    传送门:从0到1手把手教你ASP.NET Core Web API项目配置接口文档Swagger(一) 一.设置Swagger页面为首页--开发环境 我们虽然可以在输入 /swagger 后顺利的访问 ...

  5. CS144 计算机网络 Lab0:Networking Warmup

    前言 本科期间修读了<计算机网络>课程,但是课上布置的作业比较简单,只是分析了一下 Wireshark 抓包的结构,没有动手实现过协议.所以最近在哔哩大学在线学习了斯坦福大学的 CS144 ...

  6. Uniswap V2 — 从代码解释 DeFi 协议

    Uniswap V2 - 从代码解释 DeFi 协议 为了理解我们在分析代码时将要经历的不同组件,首先了解哪些是主要概念以及它们的作用是很重要的.所以,和我一起裸露吧,因为这是值得的. 我在 5 个段 ...

  7. Django笔记二十八之数据库查询优化汇总

    本文首发于公众号:Hunter后端 原文链接:Django笔记二十八之数据库查询优化汇总 这一篇笔记将从以下几个方面来介绍 Django 在查询过程中的一些优化操作,有一些是介绍如何获取 Django ...

  8. IDP中的黄金路径究竟是什么?

    在云原生时代,开发人员面临着越来越多的工具.技术.思维方式的选择,给他们带来了极大的认知负担和工作量.为了提高开发人员的开发效率与开发体验,一些头部科技公司开始建立自己的内部开发者平台(IDP).在之 ...

  9. MD5简述及常见解密网址推荐

    什么是md5 MD5(Message-Digest Algorithm 5)(信息-摘要算法5), 一种被广泛使用的[密码散列函数](https://baike.baidu.com/item/密码散列 ...

  10. Prism Sample 10 10-CustomRegistrations

    作用同上节,这里是用修改注册的方式自定义View和ViewModel的关联. protected override void ConfigureViewModelLocator() { base.Co ...