怎么用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 = 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  * 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 }

怎么用JS端实现图片、视频时直接下载而不是打开预览相关推荐

解决：PHP 阿里云OSS访问图片地址默认下载而不是在线预览
修改文件--保存后再上传图片就可以在线预览了将阿里云图片属性改为"image/jpg" 也可直接替换下方文件,已经是修改后的了,新上传的图片则不会出现不可在线预览了 image/ ...
Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏预览
需求 Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏观看,避免用户直接操作返回后导致页面空白(原有消息记录消失 - 重新进入项目首页) [补充] 全屏 ...
视频搬运伪原创 md5图片视频修改工具下载
视频搬运伪原创 md5图片视频修改工具下载用户如果看到一些特别好的作品,会对作品进行转发,比如转发到自己的3.转发量在 ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
基于java的格式转换，word 转 pdf、word 转图片、office 格式转换、在线文件预览
一.项目简介不管你是java程序员.c++程序员,python程序员,在开发项目中肯定遇到过格式转换的问题,如何轻松搞定格式转换的问题呢?当然是百度啦!面向百度编程已经成为当下程序员的日常操作. 基 ...
啦啦外卖45.9全解+三端小程序，修复坑位正常使用截图预览
啦啦外卖45.9全解+三端小程序,修复坑位正常使用截图预览,全部已知或隐藏问题已解决
图片、pdf、wrod和excel 在线预览
自定义文件服务器图片.pdf.wrod和excel 在线预览场景介绍准备工作预览图片,pdf 预览word 预览excel 效果图场景介绍因公司项目中需要使用到文件交互,因此在网上找了一个 ...
js 获取上传视频时长
有时候我们在上传视频时,可能需要获取视频时长,可以有两种方法 1.创建video标签,赋值src,然后播放获取时长(可将标签隐藏) 2.通过 Audio 对象将视频文件对象传入,获取时长,代码如下 ...

怎么用JS端实现图片、视频时直接下载而不是打开预览

怎么用JS端实现图片、视频时直接下载而不是打开预览相关推荐

最新文章

热门文章