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 }
View Code
部分技术参考：
https://www.cnblogs.com/allen0118/p/12793501.html
https://blog.csdn.net/u014643351/article/details/99303871