怎么用JS端实现图片、视频时直接下载而不是打开预览
发布日期:2021-09-29 12:54:36 浏览次数:13 分类:技术文章

本文共 3846 字,大约阅读时间需要 12 分钟。

项目中的附件列表,通常情况都需要提供下载、删除的功能,功能本身没有什么要说的,都是基本功能,使用浏览器的的下载功能,也都是用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无后缀返回 false19     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     // 匹配txt29     const txtlist = ['txt'];30     result = txtlist.find(item => item === suffix);31     if (result) {32         return 'txt';33     }34     // 匹配 excel35     const excelist = ['xls', 'xlsx'];36     result = excelist.find(item => item === suffix);37     if (result) {38         return 'excel';39     }40     // 匹配 word41     const wordlist = ['doc', 'docx'];42     result = wordlist.find(item => item === suffix);43     if (result) {44         return 'word';45     }46     // 匹配 pdf47     const pdflist = ['pdf'];48     result = pdflist.find(item => item === suffix);49     if (result) {50         return 'pdf';51     }52     // 匹配 ppt53     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 }

 

转载地址:https://blog.csdn.net/hfdxmz_3/article/details/106047493 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:ES6的数据分组
下一篇:简单说说对象浅拷贝和深拷贝有什么区别

发表评论

最新留言

不错!
[***.144.177.141]2024年03月14日 22时31分08秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

java 正则表达式分类功能_JAVA正则表达式4种常用功能 2019-04-21
java3d立方体_3d立方体贴图 2019-04-21
java ajax教程_(转)JAVA AJAX教程第三章—AJAX详细讲解 2019-04-21
java operators_A guide to Java Operators 2019-04-21
java socket调试_JAVA实现SOCKET多客户端通信的案例 2019-04-21
java 使用或覆盖了已过时的api_JAVA使用或覆盖了已过时的 API 2019-04-21
java 图片旋转保存_Java 对图片90度旋转 2019-04-21
用java实现文学研究助手_数据结构文学研究助手 C语言代码实现(带源码+解析)... 2019-04-21
java gc的几种方式_GC 的三种基本实现方式 2019-04-21
wget linux java 32_通过wget在Linux上下载Java JDK会显示在许可证页面上 2019-04-21
babylonjs 设置面板位置_babylonjs 空间坐标转为屏幕坐标 2019-04-21
oracle里面如何查询sqlid,CSS_oracle中如何查看sql, --查询表状态:  select uo.O - phpStudy... 2019-04-21
oracle 查询中用case,oracle case when 在查询时候的用法。 2019-04-21
oracle正在运行的程序包,ORACLE PL/SQL编程详解之程序包的创建与应用 2019-04-21
php局部页面滚动,在访问另一页面后保留浏览器滚动位置 - php 2019-04-21
jmeter运行linux命令行,Jmeter在linux上运行(命令行运行Jmeter) 2019-04-21
linux服务器怎么添加站点,如何增加站点或虚拟主机及文件说明 2019-04-21
linux系统输入指令,Linux系统基础 - 基本操作命令 2019-04-21
linux设备管理命令,Linux命令(设备管理).doc 2019-04-21
linux 中文utf-8转gbk编码,Linux平台下 GBK编码转UTF-8编码 2019-04-21