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 * dzl 7 * 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 = new xmlhttprequest(); 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 * dzl 5 * 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 }
部分技术参考:
上一篇: 子查询
下一篇: 解密C语言编译背后的过程