在JavaScript前端开发中，有时候我们需要避免用户点击下载链接时浏览器直接预览图片或视频，而是希望强制下载。本文将介绍如何利用download.js库以及两种常见的实现方式来达成这一目标。 首先，我们来看后台接口层面的处理。在处理文件下载时，一个常用的方法是在HTTP响应头中添加"Content-Disposition"字段。通过设置为"attachment; filename="，并编码文件名，可以指示浏览器将响应体视为附件下载，而非预览。例如： ```javascript Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(annotation.FileName, System.Text.Encoding.UTF8)); ``` 这样，无论文件类型如何，浏览器都会将其作为下载而非预览打开。这种方法适用于大多数情况下，只需要服务器配合设置即可。 另一种方法是利用前端JavaScript和download.js库。download.js是一个轻量级的JavaScript库，用于解决在现代浏览器中直接下载文件的问题。在HTML页面中引入下载.js库，然后定义一个公共函数，如： ```javascript function downloadFile(url, strFileName, strMimeType) { var xmlHttp = null; if (typeof window.ActiveXObject !== 'undefined') { // IE6, IE5兼容性代码 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (typeof XMLHttpRequest !== 'undefined') { // IE7+及现代浏览器 xmlHttp = new XMLHttpRequest(); } xmlHttp.open('GET', url, true); xmlHttp.responseType = 'blob'; xmlHttp.onload = function() { if (this.status == 200) { var blob = this.response; var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = strFileName; link.style.display = 'none'; document.body.appendChild(link); link.click(); window.URL.revokeObjectURL(link.href); document.body.removeChild(link); } }; xmlHttp.send(); } ``` 这个`downloadFile`函数接受URL、文件名和MIME类型作为参数，通过创建一个新的`XMLHttpRequest`对象发送GET请求，并设置响应类型为'blob'。在加载完成后，创建一个隐藏的`<a>`元素，设置其href属性为blob URL，并模拟点击下载。这种方式确保了无论文件类型，浏览器都会下载而不是预览。 通过后台调整响应头或前端利用download.js库，我们可以轻松地在JavaScript端实现图片、视频等文件的直接下载，提升用户体验和功能明确性。