首页 前端知识 前端通过js下载文件

前端通过js下载文件

2023-05-14 16:05:48 前端知识 前端哥 443 373 我要收藏

前端哥这次分享的是前端通过js下载文件的代码示例,主要是提供给访问者方便的下载形式,减少了访问一些列操作,比方说下载图片的时候,要右键另存为,下载txt的时候却是在线访问需要复制或者通过浏览器的下载器才能下载。

但是需要注意的是,下载远程文件需要开启跨域和允许权限问题

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>前端通过js下载文件实例 - 前端哥</title></head><body>	<button onClick="download('https://www.qianduange.cn/upload/slideImage/1673662042.jpg','前端通过js下载文件实例 - 前端哥')">标签下载</button>	<script>		function downloadFile(content, filename) {		    var a = document.createElement('a')		    var blob = new Blob([content])		    var url = window.URL.createObjectURL(blob)		    a.href = url		    a.download = filename		    a.click()		    window.URL.revokeObjectURL(url)		}				function download(url,name) {		    ajax(url, function(xhr) {		        var filename = name   url.replace(/(.*\.)/, '') // 自定义文件名 后缀		        downloadFile(xhr.response, filename)		    }, {		        responseType: 'blob'		    })		}				function ajax(url, callback, options) {		    window.URL = window.URL || window.webkitURL		    var xhr = new XMLHttpRequest()		    xhr.open('get', url, true)		    if (options.responseType) {		        xhr.responseType = options.responseType		    }		    xhr.onreadystatechange = function() {		        if (xhr.readyState === 4 && xhr.status === 200) {		            callback(xhr)		        }		    }		    xhr.send()		}	</script></body></html>


转载请注明出处或者链接地址:https://www.qianduange.cn//article/85.html
评论
发布的文章

jQuery AJAX请求的统一封装

2024-02-01 12:02:53

jQuery知识学习

2024-02-01 12:02:53

JQuery——动画效果

2024-02-01 12:02:52

jQuery复习

2024-02-01 12:02:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!