之前文章说到了如何通过将文件转成图片或者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. instanceof 的原理

    涉及面试题: instanceof 的原理是什么? instanceof 可以正确的判断对象的类型,因为内部机制是通过判断对象的原型链中是不是 能找到类型的 prototype 实现一下 instan ...

  2. 一文总结你需要的OpenCV操作

    目录 一.OpenCV简介 1.1 OpenCV是什么 1.2 安装及使用 二.图像的基础 2.1 成像原理 2.2 图像格式 2.3 颜色空间 三.OpenCV基础操作 3.1 图像的读取.显示.保 ...

  3. EF Core从TPH迁移到TPT

    Intro EF Core支持多种方式处理具有继承关系的表,现在支持TPH.TPC(EF Core 7).TPT,具体的实现方式可以参考官方文档和这篇文章. 大致总结一下不同的方式的区别: TPH:所 ...

  4. 利用NGINX搭建部署直播流媒体服务器

    直播如今是一个老生常谈的问题,怎么用于直播,大多数人只晓得,大佬某平台直播软件,点击开始即可直播.那么如何来搭建一个简易的直播平台呢?仅仅是有直播功能,没有涉及转码以及播放软件. 安装nginx以及r ...

  5. Java 异常处理:使用和思考

    概念 异常处理的概念起源于早期的编程语言,如 LISP.PL/I 和 CLU.这些编程语言首次引入了异常处理机制,以便在程序执行过程中检测和处理错误情况.异常处理机制随后在 Ada.Modula-3. ...

  6. jquery全选,全不选,反选,获取选择框的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Redis(一)五种基本数据类型

    1 NoSQl数据库 1.1 技术的发展 技术的分类: ①解决功能性问题:javase ②解决扩展性问题:框架 ③解决性能问题:redis 1.2 NoSQL数据库概述 NoSQL(Not Only ...

  8. Ajax 以及 Ajax基于Promise封装

    AJAX - 创建 XMLHttpRequest 对象 var xmlhttp = new XMLHttpRequest(); 通过打印实例对象我们发现,我们打印的是 xmlhttp 对象,里面所有的 ...

  9. Python 将函数存储在模块中

    将函数存储在模块中 将函数存储在被称为模块的独立文件中,在将模块导入到主程序中 import语句允许在当前运行的程序文件中使用模块中的代码 通过将函数存储在独立的文件中,可影藏程序的代码细节,将重点放 ...

  10. JavaScript中的四种枚举方式

    字符串和数字具有无数个值,而其他类型如布尔值则是有限的集合. 一周的日子(星期一,星期二,...,星期日),一年的季节(冬季,春季,夏季,秋季)和基本方向(北,东,南,西)都是具有有限值集合的例子. ...