參考：https://www.17sucai.com/preview/776331/2017-12-27/magnify/index.html
1、前臺 js css下載路徑https://github.com/thdoan/magnify
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Magnify demo</title>
<link rel="stylesheet" href="${ctx}/static/common/magnify/css/jquery.magnify.css">
<link rel="stylesheet" href="${ctx}/static/common/magnify/css/font-awesome.min.css">
<script type="text/javascript" src="${ctx}/static/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/static/common/magnify/js/jquery.magnify.js"></script>
</head>
<body>
<div class="image-set" hidden="hidden">
</div>
</body>
2、js
/**
*圖片預覽
*@param id 圖片存儲後臺id
*@param fileName 標題
*/
function picView(id,fileName){
window.prettyPrint && prettyPrint();
var magnify = $('[data-magnify=gallery]').magnify();//.magnify(option); option可配置參數參考上鍊接
$(".image-set").empty();//每次進來都清空div
//可有多個圖片循環查看
var preView = "<a id='"+id+"' data-magnify='gallery' data-src=''
data-caption='"+fileName+"' data-group='a'
href='${ctx}/httz/download?id="+id+"'></a>"
$(".image-set").append(preView);
$("#"+id).click();
}
3、後端
private static final String fileName="文件名";
private static final String contentType="image/jpeg";//文檔內容【image/jpeg、image/bmp、image/png、image/gif】
private static final String BASE_PATH="C:\\image\\";//文件名存放路徑
/**
* 下載
* @param request
* @param response
* @return
* @throws IOException
*/
@RequestMapping(value = "download")
public String download(HttpServletRequest request, HttpServletResponse response, Model model){
String fullPath = BASE_PATH + fileName;
BufferedInputStream bis = null;
BufferedOutputStream bos = null;
OutputStream fos = null;
InputStream fis = null;
try {
if (request.getHeader("User-Agent").toLowerCase().indexOf("firefox") > 0){
fileName = new String(fileName.getBytes("UTF-8"), "ISO8859-1");//firefox瀏覽器
}else if(request.getHeader("User-Agent").toUpperCase().indexOf("MSIE") > 0){
fileName = URLEncoder.encode(fileName, "utf-8");//IE瀏覽器
}else {
fileName = URLEncoder.encode(fileName, "utf-8");
}
response.reset();
response.setContentType(StringUtils.isNotBlank(contentType) ? contentType
: "application/octet-stream");
response.setHeader("Content-Disposition", "attachment; filename=" + fileName);
fis = new FileInputStream(fullPath);
bis = new BufferedInputStream(fis);
fos = response.getOutputStream();
bos = new BufferedOutputStream(fos);
int bytesRead = 0;
byte[] buffer = new byte[5 * 1024];
while ((bytesRead = bis.read(buffer)) != -1) {
bos.write(buffer, 0, bytesRead);// 將文件發送到客戶端
}
} catch (IOException e) {
e.printStackTrace();
} finally {
if(bos != null) {
try {
bos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if(bis != null) {
try {
bis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if(fos != null) {
try {
fos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if(fis != null) {
try {
fis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return null;
}
4、效果（chrome下可放大縮小支持滾輪、可全屏、可旋轉 ie下不支持全屏 ie9以下不支持旋轉）