java 图片双击打开_JS端实现图片、视频时直接下载而不是打开预览

项目中的附件列表，通常情况都需要提供下载、删除的功能，功能本身没有什么要说的，都是基本功能，使用浏览器的的下载功能，也都是用window.open(url)，或者window.location.href=url的方式，url即为附件下载接口，浏览器自动解析，如果是图片、视频、txt等格式的会直接预览文件，而不是像docx、xlsx一样直接下载，项目中为了功能明确，将预览单独加了一个查看按钮，下载按钮要实现无论什么文件格式都直接下载。

有两种方式处理：

一.后台接口层面处理：(比较常见)

响应头中添加标识：

Response.AddHeader("Content-Disposition", "attachment; filename=" +

HttpUtility.UrlEncode(annotation.FileName, System.Text.Encoding.UTF8));

添加后，浏览器就会全都直接下载，不区分文件格式

二.前端JS使用XMLHttpRequest结合download.js处理

1)首先页面中需要引用download.js

download官方：http://danml.com/download.html

http://danml.com/js/download2.js

2)公共方法

1 /*

2 * 使用download.js 强制浏览器下载图片、视频等文件3 * @param {any} url url链接地址4 * @param {any} strFileName 文件名5 * @param {any} strMimeType 文件类型6 * dzl7 * 2020年5月8日8 */

9 function downloadfile(url, strFileName, strMimeType) {10 var xmlHttp = null;11 if(window.ActiveXObject) {12 //IE6, IE5 浏览器执行代码

13 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");14 } else if(window.XMLHttpRequest) {15 //IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

16 xmlHttp = newXMLHttpRequest();17 }18 //2.如果实例化成功，就调用open()方法：

19 if (xmlHttp != null) {20 xmlHttp.open("get", url, true);21 xmlHttp.responseType = 'blob';//关键

22 xmlHttp.send();23 xmlHttp.onreadystatechange = doResult; //设置回调函数

24 }25 function doResult() {26 if (xmlHttp.readyState == 4) { //4表示执行完成

27 if (xmlHttp.status == 200) { //200表示执行成功

28 download(xmlHttp.response, strFileName, strMimeType);29 }30 }31 }32 }

注意： xmlHttp.responseType = 'blob';是关键，必须要设置

3)下载按钮点击事件中调用公共方法

downloadfile(url, filename, getFileType(filename))

附上根据文件名的尾缀 返回文件类型的公共方法:

1 /*

2 * 根据文件名的尾缀 返回文件类型3 * @param {any} fileName 文件名4 * dzl5 * 2020年5月9日6 */

7 function getFileType(fileName) {8 //后缀获取

9 let suffix = '';10 //获取类型结果

11 let result = '';12 try{13 const flieArr = fileName.split('.');14 suffix = flieArr[flieArr.length - 1];15 } catch(err) {16 suffix = '';17 }18 //fileName无后缀返回 false

19 if (!suffix) { return false; }20 suffix =suffix.toLocaleLowerCase();21 //图片格式

22 const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];23 //进行图片匹配

24 result = imglist.find(item => item ===suffix);25 if(result) {26 return 'image';27 }28 //匹配txt

29 const txtlist = ['txt'];30 result = txtlist.find(item => item ===suffix);31 if(result) {32 return 'txt';33 }34 //匹配 excel

35 const excelist = ['xls', 'xlsx'];36 result = excelist.find(item => item ===suffix);37 if(result) {38 return 'excel';39 }40 //匹配 word

41 const wordlist = ['doc', 'docx'];42 result = wordlist.find(item => item ===suffix);43 if(result) {44 return 'word';45 }46 //匹配 pdf

47 const pdflist = ['pdf'];48 result = pdflist.find(item => item ===suffix);49 if(result) {50 return 'pdf';51 }52 //匹配 ppt

53 const pptlist = ['ppt', 'pptx'];54 result = pptlist.find(item => item ===suffix);55 if(result) {56 return 'ppt';57 }58 //匹配 视频

59 const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];60 result = videolist.find(item => item ===suffix);61 if(result) {62 return 'video';63 }64 //匹配 音频

65 const radiolist = ['mp3', 'wav', 'wmv'];66 result = radiolist.find(item => item ===suffix);67 if(result) {68 return 'radio';69 }70 //其他 文件类型

71 return 'other';72 }

View Code

部分技术参考：